From 4662c90c4fe92abfd2313bed607443c9d5449747 Mon Sep 17 00:00:00 2001 From: chenjinsong <523037378@qq.com> Date: Thu, 31 Mar 2022 14:35:10 +0800 Subject: [PATCH] =?UTF-8?q?CN-369=20perf:=20=E5=9C=B0=E5=9B=BE=E6=82=AC?= =?UTF-8?q?=E6=B5=AE=E6=A1=86=E6=A0=B7=E5=BC=8F=E8=B0=83=E6=95=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../css/components/views/charts/chart.scss | 20 +-- src/views/charts/charts/ChartMap.vue | 128 +++++++++++++++--- 2 files changed, 123 insertions(+), 25 deletions(-) diff --git a/src/assets/css/components/views/charts/chart.scss b/src/assets/css/components/views/charts/chart.scss index a47e1835..fb14b8cd 100644 --- a/src/assets/css/components/views/charts/chart.scss +++ b/src/assets/css/components/views/charts/chart.scss @@ -277,22 +277,26 @@ .map-tooltip { display: flex; flex-direction: column; + padding: 3px 3px 0; .map-tooltip__title { - color: #333; + padding-bottom: 10px; + color: #fff; font-size: 16px; } .map-tooltip__content { display: flex; - justify-content: space-between; - color: #666; + flex-direction: column; font-size: 14px; - span { - line-height: 35px; - } - span:first-of-type { - padding-right: 20px; + .content-row { + .row__label { + color: #ddd; + padding-right: 5px; + } + .row__value { + color: #fff; + } } } } diff --git a/src/views/charts/charts/ChartMap.vue b/src/views/charts/charts/ChartMap.vue index 812da815..6d85bf21 100644 --- a/src/views/charts/charts/ChartMap.vue +++ b/src/views/charts/charts/ChartMap.vue @@ -98,6 +98,58 @@ export default { background: '#ECC6F7', border: '#B620E0' } + ], + keyMapping: [ + { + key: 'sessions', + label: this.$t('overall.sessions'), + unitType: unitTypes.number + }, + { + key: 'establishLatency', + label: this.$t('networkAppPerformance.tripTime'), + unitType: unitTypes.time + }, + { + key: 'httpResponseLatency', + label: this.$t('networkAppPerformance.httpResponse'), + unitType: unitTypes.time + }, + { + key: 'sslConLatency', + label: this.$t('networkAppPerformance.sslResponse'), + unitType: unitTypes.time + }, + { + key: 'sequenceGapLossPercent', + label: this.$t('networkAppPerformance.packetLossRate'), + unitType: unitTypes.percent + }, + { + key: 'pktRetransPercent', + label: this.$t('networkAppPerformance.retransmissionRate'), + unitType: unitTypes.percent + }, + { + key: 'packets', + label: this.$t('overall.packets'), + unitType: unitTypes.number + }, + { + key: 'sentBytes', + label: this.$t('overall.sent'), + unitType: unitTypes.byte + }, + { + key: 'receivedBytes', + label: this.$t('overall.received'), + unitType: unitTypes.byte + }, + { + key: 'count', + label: this.$t('overall.count'), + unitType: unitTypes.number + } ] } }, @@ -174,9 +226,11 @@ export default { polygonSeries.useGeodata = true polygonSeries.exclude = ['AQ'] // 排除南极洲 polygonSeries.tooltip.getFillFromObject = false - polygonSeries.tooltip.background.fill = am4Core.color('#FFFFFF') + polygonSeries.tooltip.background.fill = am4Core.color('#41495D') + polygonSeries.tooltip.background.filters.clear() + polygonSeries.tooltip.background.stroke = '#41495D' const polygonTemplate = polygonSeries.mapPolygons.template - polygonTemplate.tooltipHTML = this.generateTooltipHTML() + polygonTemplate.tooltipHTML = this.generatePolygonTooltipHTML() polygonTemplate.nonScalingStroke = true polygonTemplate.strokeWidth = 0.5 polygonTemplate.fill = am4Core.color('rgba(176,196,222,.5)') @@ -210,7 +264,11 @@ export default { circle.propertyFields.fill = 'color' circle.propertyFields.stroke = 'border' circle.strokeWidth = 1 - circle.tooltipText = '[bold]{location}[/]\n{desc}: {count}' + circle.tooltipHTML = this.generatePolygonTooltipHTML() + imageSeries.tooltip.getFillFromObject = false + imageSeries.tooltip.background.fill = am4Core.color('#41495D') + imageSeries.tooltip.background.filters.clear() + imageSeries.tooltip.background.stroke = '#41495D' imageSeries.heatRules.push({ target: circle, @@ -242,7 +300,7 @@ export default { const chartParams = this.chartInfo.params const data = chartData || this.chartData if (data && this.isMapBlock) { - const sumData = [] + /* const sumData = [] data.forEach(r => { const hit = sumData.find(s => s.id === r.serverId) const { key, labelText } = this.getDataKey(r) @@ -258,11 +316,15 @@ export default { value }) } + }) */ + const seriesData = data.map(r => { + return { + ...this.convertMapData(r), + id: r.serverId, + serverCountry: r.serverCountry, + value: r[chartParams.valueColumn] + } }) - const seriesData = sumData.map(r => ({ - ...r, - showValue: (r.value || r.value === 0) ? valueToRangeValue(r.value, chartParams.unitType).join(' ') : '' - })) !this.$_.isEmpty(seriesData) && (polygonSeries.data = [...seriesData]) // 数据全为0的情况，legend只显示1个颜色 const sorted = seriesData.sort((a, b) => b.value - a.value) @@ -297,7 +359,7 @@ export default { return '' }) } else if (data && this.isMapPoint) { - const seriesData = [] + /* const seriesData = [] data.forEach(d => { seriesData.push({ id: d.ipLocationId, @@ -308,7 +370,16 @@ export default { color: this.circleColor[d.dnsServerRole.toUpperCase()].background, border: this.circleColor[d.dnsServerRole.toUpperCase()].border }) - }) + }) */ + const seriesData = data.map(r => ({ + ...this.convertMapData(r), + id: r.ipLocationId, + dnsServerRole: r.dnsServerRole, + name: r.ipLocationCity || r.ipLocationProvince || r.ipLocationCountry, + desc: this.$t(this.dnsTypeI18n(r.dnsServerRole)), + color: this.circleColor[r.dnsServerRole.toUpperCase()].background, + border: this.circleColor[r.dnsServerRole.toUpperCase()].border + })) imageSeries.data = seriesData } } catch (e) { @@ -370,16 +441,23 @@ export default { } return i18n }, - generateTooltipHTML () { - return ` + generatePolygonTooltipHTML () { + let html = `
{name}
-
- {labelText} - {showValue} +
` + this.keyMapping.forEach(mapping => { + html += ` + + ` + }) + html += `
-
- ` +
` + return html }, getDataKey (r) { let key = '' @@ -404,6 +482,22 @@ export default { labelText = this.$t('overall.sessions') } return { key, labelText } + }, + convertMapData (data) { + const converted = {} + this.keyMapping.forEach(mapping => { + if (data[mapping.key] || data[mapping.key] === 0) { + converted[mapping.key] = Number(data[mapping.key]) + converted[`${mapping.key}Label`] = mapping.label + converted[`${mapping.key}ShowValue`] = valueToRangeValue(data[mapping.key], mapping.unitType).join(' ') + converted[`${mapping.key}Display`] = 'block' + } else { + converted[mapping.key] = '' + converted[`${mapping.key}Label`] = '' + converted[`${mapping.key}Display`] = 'none' + } + }) + return converted } }, watch: {