diff --git a/src/assets/css/components/views/charts/chart.scss b/src/assets/css/components/views/charts/chart.scss index aef28daf..ca93066e 100644 --- a/src/assets/css/components/views/charts/chart.scss +++ b/src/assets/css/components/views/charts/chart.scss @@ -281,6 +281,8 @@ padding: 3px 3px 0; .map-tooltip__title { + display: flex; + align-items: center; padding-bottom: 4px; font-size: 12px; color: #353636; @@ -291,14 +293,36 @@ flex-direction: column; font-size: 12px; + .content-title { + padding: 3px 0 2px; + font-size: 12px; + color: #046ECA; + font-weight: bold; + } .content-row { display: flex; + padding-left: 12px; + + &.content-row--score { + position: relative; + + span { + position: absolute; + left: 0; + top: calc(50% - 3px); + height: 6px; + width: 6px; + border-radius: 50%; + } + } .row__label { - width: 80px; + width: 190px; color: #575757; padding-right: 5px; } .row__value { + width: 80px; + text-align: end; font-weight: bold; color: #353636; } diff --git a/src/views/charts2/charts/npm/NpmIpMap.vue b/src/views/charts2/charts/npm/NpmIpMap.vue index 09371ff7..f19fb9d3 100644 --- a/src/views/charts2/charts/npm/NpmIpMap.vue +++ b/src/views/charts2/charts/npm/NpmIpMap.vue @@ -133,9 +133,33 @@ export default { tcpLostlenPercent: t.tcpLostScore ? t.tcpLostScore.tcpLostlenPercent : null, pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null } - t.score = computeScore(data) - if (t.score === '-') { - t.score = '' + t.tooltip = {} + t.tooltip.data = { + establishLatencyMs: valueToRangeValue(data.establishLatencyMs, unitTypes.time).join(' '), + httpResponseLatency: valueToRangeValue(data.httpResponseLatency, unitTypes.time).join(' '), + sslConLatency: valueToRangeValue(data.sslConLatency, unitTypes.time).join(' '), + tcpLostlenPercent: valueToRangeValue(data.tcpLostlenPercent, unitTypes.percent).join(' '), + pktRetransPercent: valueToRangeValue(data.pktRetransPercent, unitTypes.percent).join(' ') + } + t.tooltip.data.score = computeScore(data) + if (t.tooltip.data.score === '-') { + t.tooltip.data.score = '' + } + t.tooltip.data.total = valueToRangeValue(t.totalBitsRate, unitTypes.bps).join(' ') + t.tooltip.data.inbound = valueToRangeValue(t.inboundBitsRate, unitTypes.bps).join(' ') + t.tooltip.data.outbound = valueToRangeValue(t.outboundBitsRate, unitTypes.bps).join(' ') + t.tooltip.text = { + traffic: this.$t('overall.traffic'), + total: this.$t('network.total'), + inbound: this.$t('network.inbound'), + outbound: this.$t('network.outbound'), + performance: this.$t('linkMonitor.performance'), + score: this.$t('network.score'), + tcpLostlenPercent: this.$t('networkAppPerformance.packetLoss'), + pktRetransPercent: this.$t('networkAppPerformance.packetRetrans'), + establishLatencyMs: this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), + httpResponseLatency: this.$t('networkAppPerformance.httpResponseLatency'), + sslConLatency: this.$t('networkAppPerformance.sslResponseLatency') } }) this.loadMarkerData(imageSeries, mapData) @@ -157,14 +181,14 @@ export default { } }, loadMarkerData (imageSeries, data) { - data = data.filter(d => d.score || d.score === 0) - imageSeries.data = data.map(r => ({ - score: r.score, + const _data = data.filter(d => d.tooltip.data.score || d.tooltip.data.score === 0) + imageSeries.data = _data.map(r => ({ + ...r, + score: r.tooltip.data.score, name: r.province || r.country, - throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '), id: r.serverId, - color: this.scoreColor(r.score), - border: this.scoreColor(r.score) + color: this.scoreColor(r.tooltip.data.score), + border: this.scoreColor(r.tooltip.data.score) })) }, scoreColor (score) { @@ -179,15 +203,46 @@ export default { generatePolygonTooltipHTML () { const html = `
-
{name}
+
{name}
+
{tooltip.text.traffic}
-
Score
-
{score}
+
{tooltip.text.total}
+
{tooltip.data.total}
-
Throughput
-
{throughput}
+
{tooltip.text.inbound}
+
{tooltip.data.inbound}
+
+
+
{tooltip.text.outbound}
+
{tooltip.data.outbound}
+
+
{tooltip.text.performance}
+
+ +
{tooltip.text.score}
+
{tooltip.data.score}
+
+
+
{tooltip.text.tcpLostlenPercent}
+
{tooltip.data.tcpLostlenPercent}
+
+
+
{tooltip.text.pktRetransPercent}
+
{tooltip.data.pktRetransPercent}
+
+
+
{tooltip.text.establishLatencyMs}
+
{tooltip.data.establishLatencyMs}
+
+
+
{tooltip.text.httpResponseLatency}
+
{tooltip.data.httpResponseLatency}
+
+
+
{tooltip.text.sslConLatency}
+
{tooltip.data.sslConLatency}
` diff --git a/src/views/charts2/charts/npm/NpmMap.vue b/src/views/charts2/charts/npm/NpmMap.vue index aa1779b7..119fc01d 100644 --- a/src/views/charts2/charts/npm/NpmMap.vue +++ b/src/views/charts2/charts/npm/NpmMap.vue @@ -164,9 +164,33 @@ export default { tcpLostlenPercent: t.tcpLostScore ? t.tcpLostScore.tcpLostlenPercent : null, pktRetransPercent: t.packetRetransScore ? t.packetRetransScore.pktRetransPercent : null } - t.score = computeScore(data) - if (t.score === '-') { - t.score = '' + t.tooltip = {} + t.tooltip.data = { + establishLatencyMs: valueToRangeValue(data.establishLatencyMs, unitTypes.time).join(' '), + httpResponseLatency: valueToRangeValue(data.httpResponseLatency, unitTypes.time).join(' '), + sslConLatency: valueToRangeValue(data.sslConLatency, unitTypes.time).join(' '), + tcpLostlenPercent: valueToRangeValue(data.tcpLostlenPercent, unitTypes.percent).join(' '), + pktRetransPercent: valueToRangeValue(data.pktRetransPercent, unitTypes.percent).join(' ') + } + t.tooltip.data.score = computeScore(data) + if (t.tooltip.data.score === '-') { + t.tooltip.data.score = '' + } + t.tooltip.data.total = valueToRangeValue(t.totalBitsRate, unitTypes.bps).join(' ') + t.tooltip.data.inbound = valueToRangeValue(t.inboundBitsRate, unitTypes.bps).join(' ') + t.tooltip.data.outbound = valueToRangeValue(t.outboundBitsRate, unitTypes.bps).join(' ') + t.tooltip.text = { + traffic: this.$t('overall.traffic'), + total: this.$t('network.total'), + inbound: this.$t('network.inbound'), + outbound: this.$t('network.outbound'), + performance: this.$t('linkMonitor.performance'), + score: this.$t('network.score'), + tcpLostlenPercent: this.$t('networkAppPerformance.packetLoss'), + pktRetransPercent: this.$t('networkAppPerformance.packetRetrans'), + establishLatencyMs: this.$t('networkAppPerformance.tcpConnectionEstablishLatency'), + httpResponseLatency: this.$t('networkAppPerformance.httpResponseLatency'), + sslConLatency: this.$t('networkAppPerformance.sslResponseLatency') } }) this.loadMarkerData(imageSeries, mapData) @@ -195,14 +219,14 @@ export default { } }, loadMarkerData (imageSeries, data) { - const _data = data.filter(d => d.score || d.score === 0) + const _data = data.filter(d => d.tooltip.data.score || d.tooltip.data.score === 0) imageSeries.data = _data.map(r => ({ - score: r.score, + ...r, + score: r.tooltip.data.score, name: r.province || r.country, - throughput: valueToRangeValue(r.throughBitsRate, unitTypes.bps).join(' '), id: r.serverId, - color: this.scoreColor(r.score), - border: this.scoreColor(r.score) + color: this.scoreColor(r.tooltip.data.score), + border: this.scoreColor(r.tooltip.data.score) })) }, scoreColor (score) { @@ -217,15 +241,46 @@ export default { generatePolygonTooltipHTML () { const html = `
-
{name}
+
{name}
+
{tooltip.text.traffic}
-
Score
-
{score}
+
{tooltip.text.total}
+
{tooltip.data.total}
-
Throughput
-
{throughput}
+
{tooltip.text.inbound}
+
{tooltip.data.inbound}
+
+
+
{tooltip.text.outbound}
+
{tooltip.data.outbound}
+
+
{tooltip.text.performance}
+
+ +
{tooltip.text.score}
+
{tooltip.data.score}
+
+
+
{tooltip.text.tcpLostlenPercent}
+
{tooltip.data.tcpLostlenPercent}
+
+
+
{tooltip.text.pktRetransPercent}
+
{tooltip.data.pktRetransPercent}
+
+
+
{tooltip.text.establishLatencyMs}
+
{tooltip.data.establishLatencyMs}
+
+
+
{tooltip.text.httpResponseLatency}
+
{tooltip.data.httpResponseLatency}
+
+
+
{tooltip.text.sslConLatency}
+
{tooltip.data.sslConLatency}
` @@ -281,6 +336,7 @@ export default { imageSeries.tooltip.background.fill = am4Core.color('#FFFFFF') imageSeries.tooltip.background.filters.clear() imageSeries.tooltip.background.stroke = '#C5C5C5' + imageSeries.tooltip.pointerOrientation = 'horizontal' imageSeries.heatRules.push({ target: circle,