gfwleak/cyber-narrator-cn-ui
Archived
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: 临时性调整npm line和npm traffic line的legend名字

Browse Source
This commit is contained in:
chenjinsong
2022-11-04 12:52:12 +08:00
parent 34e16fc890
commit c425d87b00
4 changed files with 18 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/views/charts/charts/tools.js
View File

@@ -475,7 +475,7 @@ export function stackedLineTooltipFormatter (params) {
params.forEach((item, i) => { params.forEach((item, i) => {
str += '<span class="cn-chart-tooltip-box">' str += '<span class="cn-chart-tooltip-box">'
str += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${item.borderColor};"></span>` str += `<span style="display:inline-block;margin-right:4px;border-radius:10px;width:10px;height:10px;background-color:${item.borderColor};"></span>`
str += `<span class="cn-chart-tooltip-content">${item.seriesName}</span>` str += `<span class="cn-chart-tooltip-content">${item.seriesName.split('(')[0]}</span>`
str += '</span>' str += '</span>'
}) })
str += '</div>' str += '</div>'

10
src/views/charts2/charts/npm/NpmLine.vue
View File

@@ -14,23 +14,23 @@
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div> <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-else-if="chartData.id === 12"> <template v-else-if="chartData.id === 12">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div> <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div> <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-else-if="chartData.id === 13"> <template v-else-if="chartData.id === 13">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div> <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div> <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-else-if="chartData.id === 14"> <template v-else-if="chartData.id === 14">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div> <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(ms)</div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div> <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-else-if="chartData.id === 15"> <template v-else-if="chartData.id === 15">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div> <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(%)</div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div> <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
<template v-else-if="chartData.id === 16"> <template v-else-if="chartData.id === 16">
<div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}</div> <div class="npm-line-title">{{$t(chartData.i18n) || chartData.name}}(%)</div>
<div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div> <div v-show="!isNoData" class="chart-drawing" :id="`chart${chartData.name}`"></div>
</template> </template>
</div> </div>

24
src/views/charts2/charts/npm/NpmTrafficLine.vue
View File

@@ -238,7 +238,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(ms)')
} else if (t.type === 'httpResponseLatency' && val === 'httpResponseLatency') { } else if (t.type === 'httpResponseLatency' && val === 'httpResponseLatency') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[1].data = t.httpResponseLatencyAvg.values ? t.httpResponseLatencyAvg.values : [] npmQuantity[1].data = t.httpResponseLatencyAvg.values ? t.httpResponseLatencyAvg.values : []
@@ -250,7 +250,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(ms)')
} else if (t.type === 'sslConLatency' && val === 'sslConLatency') { } else if (t.type === 'sslConLatency' && val === 'sslConLatency') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[2].data = t.sslConLatencyAvg.values ? t.sslConLatencyAvg.values : [] npmQuantity[2].data = t.sslConLatencyAvg.values ? t.sslConLatencyAvg.values : []
@@ -262,7 +262,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(ms)')
} else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') { } else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[3].data = t.tcpLostlenPercentAvg.values ? t.tcpLostlenPercentAvg.values : [] npmQuantity[3].data = t.tcpLostlenPercentAvg.values ? t.tcpLostlenPercentAvg.values : []
@@ -274,7 +274,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(%)')
} else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') { } else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[4].data = t.pktRetransPercentAvg.values ? t.pktRetransPercentAvg.values : [] npmQuantity[4].data = t.pktRetransPercentAvg.values ? t.pktRetransPercentAvg.values : []
@@ -286,7 +286,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(%)')
} }
}) })
} else { } else {
@@ -384,7 +384,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(ms)')
} else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') { } else if (t.type === 'tcpLostlenPercent' && val === 'tcpLostlenPercent') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[3].data = t.tcpLostlenPercent.values ? t.tcpLostlenPercent.values : [] npmQuantity[3].data = t.tcpLostlenPercent.values ? t.tcpLostlenPercent.values : []
@@ -396,7 +396,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(%)')
} else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') { } else if (t.type === 'pktRetransPercent' && val === 'pktRetransPercent') {
const npmQuantity = _.cloneDeep(this.npmQuantity) const npmQuantity = _.cloneDeep(this.npmQuantity)
npmQuantity[4].data = t.pktRetransPercent.values ? t.pktRetransPercent.values : [] npmQuantity[4].data = t.pktRetransPercent.values ? t.pktRetransPercent.values : []
@@ -408,7 +408,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(%)')
} }
}) })
} }
@@ -443,7 +443,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(ms)')
} }
}) })
} }
@@ -478,7 +478,7 @@ export default {
} }
}) })
this.npmQuantity = npmQuantity this.npmQuantity = npmQuantity
this.echartsInit(this.npmQuantity) this.echartsInit(this.npmQuantity, '(ms)')
} }
}) })
} }
@@ -490,7 +490,7 @@ export default {
} }
} }
}, },
echartsInit (echartsData) { echartsInit (echartsData, legendUnit) {
echartsData = echartsData.filter(t => t.show === true) echartsData = echartsData.filter(t => t.show === true)
const dom = document.getElementById('chart') const dom = document.getElementById('chart')
!this.myChart && (this.myChart = echarts.init(dom)) !this.myChart && (this.myChart = echarts.init(dom))
@@ -508,7 +508,7 @@ export default {
} }
return { return {
...chartOption, ...chartOption,
name: this.$t(t.name), name: this.$t(t.name) + (legendUnit || ''),
lineStyle: { lineStyle: {
color: chartColor3[t.positioning], color: chartColor3[t.positioning],
width: 1 width: 1

1
src/views/charts2/charts/options/echartOption.js
View File

@@ -384,7 +384,6 @@ export const trafficLineChartOption = {
padding: [0, 0, 0, 2], padding: [0, 0, 0, 2],
fontSize: 12, fontSize: 12,
color: '#717171', color: '#717171',
fontWeight: 400,
fontFamily: 'NotoSansSChineseRegular' fontFamily: 'NotoSansSChineseRegular'
} }
}, },