From fcde904a9a4f82ab9c6942a3a62bb639148e5182 Mon Sep 17 00:00:00 2001 From: Christian Date: Thu, 7 Jul 2022 00:48:10 -0600 Subject: [PATCH 1/5] Adding average labels to graphs in monitoring module In the monitoring module, when hovering a given graph, show the corresponding average value on a label outside the sparkline. --- src/ServicePulse.Host/app/css/particular.css | 46 ++++++++- .../js/directives/ui.particular.largeGraph.js | 95 ++++++++++++++++++- 2 files changed, 135 insertions(+), 6 deletions(-) diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css index 331529894f..8ee6a955d5 100644 --- a/src/ServicePulse.Host/app/css/particular.css +++ b/src/ServicePulse.Host/app/css/particular.css @@ -3526,4 +3526,48 @@ g.error .node-text .lead.saga { g.error .node-text a:hover { text-decoration: underline; -} \ No newline at end of file +div.avg-tooltip { + position: absolute; + text-align: right; + padding: .5rem; + line-height: 1; + background: #2800ca; + color: #ffffff; + border: 1px solid #313639; + border-radius: 8px; + pointer-events: none; + font-size: 1.3rem; + white-space: nowrap; +} + +div.avg-tooltip.left { + text-align: left; +} + +div.avg-tooltip:before { + content: ''; + display: block; + z-index: -1; + background-color: #2800ca; + right: 0; + position: absolute; + top: 50%; + + width: 30px; + height: 30px; + margin-top: -15px; + margin-right: -13px; + + transform: rotate(45deg); +} + +div.avg-tooltip.left:before { + right: inherit; + margin-right: inherit; + margin-left: -13px; + left:0; +} + +div.avg-tooltip .ms { + font-size: 2rem; +} diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js index 6f08070f2d..82284b7cca 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js @@ -1,5 +1,8 @@ (function(window, angular, d3) { 'use strict'; + + var averageLabelToTheRight = ArrowLabel({pointToTheLeft: false, caption: 'AVG'}); + var averageLabelToTheLeft = ArrowLabel({pointToTheLeft: true, caption: 'AVG'}); function drawDataSeries(chart, data, color, fillColor, scaleX, scaleY) { @@ -40,13 +43,15 @@ var group = chart.append('g').attr('class', 'dataAverage'); - group.append('path') + var avgLine = group.append('path') .datum(Array(data.points.length).fill(data.average)) .attr('d', line) .attr('stroke', color) .attr('stroke-width', 1.5) .attr('opacity', 0.5) .attr('stroke-dasharray', '10,10'); + + return avgLine; } function padToWholeValue(value) { @@ -163,23 +168,103 @@ } var drawAverage = function(data, lineColor, fillColor) { - drawAverageLine(chart, data, lineColor, fillColor, scaleX, scaleY); + return drawAverageLine(chart, data, lineColor, fillColor, scaleX, scaleY); } - + + var displayAverageLabel = function(averageLine, label, value) { + var {x , y, width} = averageLine.node().getBoundingClientRect(); + label.value(`${value.toFixed(2)}`); + + if(label.pointingToTheLeft){ + label.displayAt(x + width, y); + } else { + label.displayAt(x, y); + } + + } + drawSeries(firstSeries, attrs.firstSeriesColor, attrs.firstSeriesFillColor); if (secondSeries) { drawSeries(secondSeries, attrs.secondSeriesColor,attrs.secondSeriesFillColor); } - drawAverage(firstSeries, attrs.firstSeriesColor, attrs.firstSeriesFillColor ); + var firstAverageLine = drawAverage(firstSeries, attrs.firstSeriesColor, attrs.firstSeriesFillColor ); + + var secondAverageLine = null; if (secondSeries) { - drawAverage(secondSeries, attrs.secondSeriesColor, attrs.secondSeriesFillColor); + secondAverageLine = drawAverage(secondSeries, attrs.secondSeriesColor, attrs.secondSeriesFillColor); } + + chart.on("mouseover", function() { + displayAverageLabel(firstAverageLine, averageLabelToTheRight, firstSeries.average); + + if(secondAverageLine && secondSeries.points.length > 0){ + displayAverageLabel(secondAverageLine, averageLabelToTheLeft, secondSeries.average); + } + }) + .on("mouseout", function(){ + averageLabelToTheRight.hide(); + averageLabelToTheLeft.hide(); + }); }); } }; }); + function ArrowLabel({pointToTheLeft=false, caption=''}){ + + var div = document.createElement('div'); + div.style.position = 'absolute'; + div.style.zIndex = 10; + div.style.visibility = 'hidden'; + div.classList = `avg-tooltip${pointToTheLeft && ' left' || ''}`; + div.innerHTML = `
+ ${caption} +
+
+ 0 ms +
`; + document.body.appendChild(div); + + if(pointToTheLeft){ + div.style.right = 'inherit'; + } else { + div.style.left = 'inherit'; + } + + return { + displayAt: function(x, y) { + var lableDimensions = getComputedStyle(div); + //align the label vertically. + div.style.top = `${Math.trunc(y - lableDimensions.height.replace('px', '') / 2)}px`; + + //align the label horizontally. + //get the label tip dimensions. The label tip is composed by a roated square the the ::before meta-element. + var labelTipWidth = getComputedStyle(div,':before').width.replace('px',''); + var labelTipHeight = getComputedStyle(div,':before').height.replace('px',''); + var lalbeTipHypotenuce = Math.trunc(Math.hypot(labelTipWidth,labelTipHeight)); + + if(pointToTheLeft == false) { + div.style.right = `calc(100% - ${x}px + ${lalbeTipHypotenuce / 2}px)`; + } else { + div.style.left = `${x + (lalbeTipHypotenuce / 2)}px`; + } + + div.style.visibility = 'visible'; + }, + + hide: function() { + div.style.visibility = 'hidden'; + }, + + value: function(value){ + div.querySelector('.ms').innerHTML = `${value} ms` + }, + + pointingToTheLeft: pointToTheLeft + } + } + }(window, window.angular, window.d3)); From 59031c7977b2a98ff2bde2fd177eb5c754063dbf Mon Sep 17 00:00:00 2001 From: Christian Date: Fri, 8 Jul 2022 00:47:40 -0600 Subject: [PATCH 2/5] avg label improvements - matching graph color - smaller size - fixing positioning bug when window content is scrolled --- src/ServicePulse.Host/app/css/particular.css | 30 +++++++++++-------- .../js/directives/ui.particular.largeGraph.js | 26 ++++++++-------- 2 files changed, 30 insertions(+), 26 deletions(-) diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css index 8ee6a955d5..78a4269994 100644 --- a/src/ServicePulse.Host/app/css/particular.css +++ b/src/ServicePulse.Host/app/css/particular.css @@ -3526,37 +3526,40 @@ g.error .node-text .lead.saga { g.error .node-text a:hover { text-decoration: underline; +:root { + --avg-tooltip-background-color: #000; + } + div.avg-tooltip { position: absolute; text-align: right; padding: .5rem; line-height: 1; - background: #2800ca; + background: var(--avg-tooltip-background-color); color: #ffffff; - border: 1px solid #313639; - border-radius: 8px; + border-radius: 8px 1px 1px 8px; pointer-events: none; - font-size: 1.3rem; + font-size: 11px; white-space: nowrap; } div.avg-tooltip.left { text-align: left; + border-radius: 1px 8px 8px 1px; } div.avg-tooltip:before { content: ''; display: block; z-index: -1; - background-color: #2800ca; right: 0; position: absolute; top: 50%; - - width: 30px; - height: 30px; - margin-top: -15px; - margin-right: -13px; + background-color: var(--avg-tooltip-background-color); + width: 24px; + height: 24px; + margin-top: -12px; + margin-right: -12px; transform: rotate(45deg); } @@ -3564,10 +3567,11 @@ div.avg-tooltip:before { div.avg-tooltip.left:before { right: inherit; margin-right: inherit; - margin-left: -13px; + margin-left: -12px; left:0; } -div.avg-tooltip .ms { - font-size: 2rem; +div.avg-tooltip .unit { + font-size: 14px; +} } diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js index 82284b7cca..47f31a1a1f 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js @@ -50,7 +50,7 @@ .attr('stroke-width', 1.5) .attr('opacity', 0.5) .attr('stroke-dasharray', '10,10'); - + return avgLine; } @@ -171,16 +171,15 @@ return drawAverageLine(chart, data, lineColor, fillColor, scaleX, scaleY); } - var displayAverageLabel = function(averageLine, label, value) { + var displayAverageLabel = function(averageLine, label, value, color, unit) { var {x , y, width} = averageLine.node().getBoundingClientRect(); - label.value(`${value.toFixed(2)}`); + label.value(`${value.toFixed(0)}`); if(label.pointingToTheLeft){ - label.displayAt(x + width, y); + label.displayAt({x:x + width + window.pageXOffset, y:y + window.pageYOffset, color, unit}); } else { - label.displayAt(x, y); + label.displayAt({x:x + window.pageXOffset, y:y + window.pageYOffset, color, unit}); } - } drawSeries(firstSeries, attrs.firstSeriesColor, attrs.firstSeriesFillColor); @@ -198,10 +197,10 @@ } chart.on("mouseover", function() { - displayAverageLabel(firstAverageLine, averageLabelToTheRight, firstSeries.average); + displayAverageLabel(firstAverageLine, averageLabelToTheRight, firstSeries.average, attrs.firstSeriesColor,''); if(secondAverageLine && secondSeries.points.length > 0){ - displayAverageLabel(secondAverageLine, averageLabelToTheLeft, secondSeries.average); + displayAverageLabel(secondAverageLine, averageLabelToTheLeft, secondSeries.average, attrs.secondSeriesColor); } }) .on("mouseout", function(){ @@ -218,13 +217,13 @@ var div = document.createElement('div'); div.style.position = 'absolute'; div.style.zIndex = 10; - div.style.visibility = 'hidden'; + div.style.visibility = 'hidden'; div.classList = `avg-tooltip${pointToTheLeft && ' left' || ''}`; div.innerHTML = `
${caption}
-
- 0 ms +
+ 0
`; document.body.appendChild(div); @@ -235,7 +234,7 @@ } return { - displayAt: function(x, y) { + displayAt: function({x, y, color, unit}) { var lableDimensions = getComputedStyle(div); //align the label vertically. div.style.top = `${Math.trunc(y - lableDimensions.height.replace('px', '') / 2)}px`; @@ -253,6 +252,7 @@ } div.style.visibility = 'visible'; + div.style.setProperty('--avg-tooltip-background-color', color); }, hide: function() { @@ -260,7 +260,7 @@ }, value: function(value){ - div.querySelector('.ms').innerHTML = `${value} ms` + div.querySelector('.unit').innerHTML = `${value}` }, pointingToTheLeft: pointToTheLeft From 89dfbe201cc3a8ada028fe6e5add7082feaaba48 Mon Sep 17 00:00:00 2001 From: Christian Date: Mon, 11 Jul 2022 23:33:32 -0600 Subject: [PATCH 3/5] adding mesurement unit --- .../js/directives/ui.particular.largeGraph.js | 27 ++++++++++++------- .../monitoring/views/endpoint_details.html | 2 ++ 2 files changed, 20 insertions(+), 9 deletions(-) diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js index 47f31a1a1f..dd70472593 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js @@ -171,14 +171,14 @@ return drawAverageLine(chart, data, lineColor, fillColor, scaleX, scaleY); } - var displayAverageLabel = function(averageLine, label, value, color, unit) { + var displayAverageLabel = function(averageLine, label, value, color) { var {x , y, width} = averageLine.node().getBoundingClientRect(); - label.value(`${value.toFixed(0)}`); + label.value(`${value}`); if(label.pointingToTheLeft){ - label.displayAt({x:x + width + window.pageXOffset, y:y + window.pageYOffset, color, unit}); + label.displayAt({x:x + width + window.pageXOffset, y:y + window.pageYOffset, color}); } else { - label.displayAt({x:x + window.pageXOffset, y:y + window.pageYOffset, color, unit}); + label.displayAt({x:x + window.pageXOffset, y:y + window.pageYOffset, color}); } } @@ -196,11 +196,20 @@ secondAverageLine = drawAverage(secondSeries, attrs.secondSeriesColor, attrs.secondSeriesFillColor); } - chart.on("mouseover", function() { - displayAverageLabel(firstAverageLine, averageLabelToTheRight, firstSeries.average, attrs.firstSeriesColor,''); + chart.on("mouseover", function() { + var value = `${firstSeries.average.toFixed(2)} ${attrs.metricSuffix}`; + if(scope.isDurationGraph){ + value = `${formatter.formatTime(firstSeries.average).value} ${formatter.formatTime(firstSeries.average).unit}`; + } + + displayAverageLabel(firstAverageLine, averageLabelToTheRight, value, attrs.firstSeriesColor,''); if(secondAverageLine && secondSeries.points.length > 0){ - displayAverageLabel(secondAverageLine, averageLabelToTheLeft, secondSeries.average, attrs.secondSeriesColor); + value = `${secondSeries.average.toFixed(2)} ${attrs.metricSuffix}`; + if(scope.isDurationGraph){ + value = `${formatter.formatTime(secondSeries.average).value} ${formatter.formatTime(secondSeries.average).unit}`; + } + displayAverageLabel(secondAverageLine, averageLabelToTheLeft, value, attrs.secondSeriesColor); } }) .on("mouseout", function(){ @@ -234,7 +243,7 @@ } return { - displayAt: function({x, y, color, unit}) { + displayAt: function({x, y, color}) { var lableDimensions = getComputedStyle(div); //align the label vertically. div.style.top = `${Math.trunc(y - lableDimensions.height.replace('px', '') / 2)}px`; @@ -264,7 +273,7 @@ }, pointingToTheLeft: pointToTheLeft - } + } } }(window, window.angular, window.d3)); diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html index 1485364f17..914dde1002 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html +++ b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html @@ -49,6 +49,7 @@

plot-height="200" first-series-color="#EA7E00" first-series-fill-color="#EADDCE" + metric-suffix="MSGS" class="large-graph pull-left"> @@ -88,6 +89,7 @@

first-series-fill-color="#CADCE8" second-series-color="#CC1252" second-series-fill-color="#E9C4D1" + metric-suffix="MSGS/S" class="large-graph pull-left"> From f352edf01767854273ff4b727e26d8736cbd2549 Mon Sep 17 00:00:00 2001 From: Christian Date: Tue, 12 Jul 2022 16:56:43 -0600 Subject: [PATCH 4/5] average label for small graphs - average label added to small graphs - average label function moved to its own file - passing new required attributes to everywhere small graphs are used: endpoint details, monitored endpoints list, monitored endpoint list grouped - css improvements for showing all the text inside the label aligned to the left and to make the suffix unit of measure to be a bit smaller than the displaying average value --- src/ServicePulse.Host/app/css/particular.css | 9 +- .../js/directives/ui.particular.arrowLabel.js | 50 ++++++++ .../js/directives/ui.particular.graph.js | 51 +++++++- .../js/directives/ui.particular.largeGraph.js | 120 ++++++------------ .../monitoring/views/endpoint_details.html | 21 +-- .../views/monitored_endpoints_list.html | 10 +- .../monitored_endpoints_list_grouped.html | 10 +- 7 files changed, 163 insertions(+), 108 deletions(-) create mode 100644 src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css index 78a4269994..9434e77777 100644 --- a/src/ServicePulse.Host/app/css/particular.css +++ b/src/ServicePulse.Host/app/css/particular.css @@ -3532,7 +3532,7 @@ g.error .node-text a:hover { div.avg-tooltip { position: absolute; - text-align: right; + text-align: left; padding: .5rem; line-height: 1; background: var(--avg-tooltip-background-color); @@ -3543,8 +3543,7 @@ div.avg-tooltip { white-space: nowrap; } -div.avg-tooltip.left { - text-align: left; +div.avg-tooltip.left { border-radius: 1px 8px 8px 1px; } @@ -3574,4 +3573,8 @@ div.avg-tooltip.left:before { div.avg-tooltip .unit { font-size: 14px; } + +div.avg-tooltip .unit span { + font-size: 11px; +} } diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js new file mode 100644 index 0000000000..7009626e4e --- /dev/null +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js @@ -0,0 +1,50 @@ +export default function ArrowLabel({ pointToTheLeft = false, caption = '' }) { + + var div = document.createElement('div'); + div.style.position = 'absolute'; + div.style.zIndex = 10; + div.style.visibility = 'hidden'; + div.classList = `avg-tooltip${pointToTheLeft && ' left' || ''}`; + div.innerHTML = `
+ ${caption} +
+
+ 0 +
`; + document.body.appendChild(div); + + return { + displayAt: function ({ x, y, color}) { + var lableDimensions = getComputedStyle(div); + //align the label vertically. + div.style.top = `${Math.trunc(y - lableDimensions.height.replace('px', '') / 2)}px`; + + //align the label horizontally. + //get the label tip dimensions. The label tip is composed by a roated square of the ::before pseudo-element. + var labelTipWidth = getComputedStyle(div, ':before').width.replace('px', ''); + var labelTipHeight = getComputedStyle(div, ':before').height.replace('px', ''); + var lalbeTipHypotenuse = Math.trunc(Math.hypot(labelTipWidth, labelTipHeight)); + + if (pointToTheLeft == false) { + div.style.left = 'inherit'; + div.style.right = `calc(100% - ${x}px + ${lalbeTipHypotenuse / 2}px)`; + } else { + div.style.right = 'inherit'; + div.style.left = `${x + (lalbeTipHypotenuse / 2)}px`; + } + + div.style.visibility = 'visible'; + div.style.setProperty('--avg-tooltip-background-color', color); //by using properties the color of the 'before' content pseudo element can be updated. + }, + + hide: function () { + div.style.visibility = 'hidden'; + }, + + value: function (value, unit) { + div.querySelector('.unit').innerHTML = `${value} ${unit}`; + }, + + pointingToTheLeft: pointToTheLeft + }; +} \ No newline at end of file diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.graph.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.graph.js index be903726fb..3cd031d72e 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.graph.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.graph.js @@ -1,18 +1,33 @@ -(function(window, angular, d3) { +import ArrowLabel from './ui.particular.arrowLabel'; + +(function(window, angular, d3) { 'use strict'; + const averageDecimalsDefault = 2; + const avgLabelColorDefault = '#2700CB'; + const avgLabelSuffixDefault = ''; + + var averageLabelToTheRight = ArrowLabel({pointToTheLeft: false, caption: 'AVG'}); + + angular.module('ui.particular.graph', []) .directive('graph', - function() { + function(formatter) { return { restrict: 'E', scope: { plotData: '=', formatter: '&', - minimumYaxis: '@' + minimumYaxis: '@', + isDurationGraph: '=isDurationGraph', + avgDecimals: '@' }, template: '', link: function link(scope, element, attrs) { + attrs.avgLabelColor = attrs.avgLabelColor || avgLabelColorDefault; + attrs.metricSuffix = attrs.metricSuffix || avgLabelSuffixDefault; + scope.avgDecimals = scope.avgDecimals || averageDecimalsDefault; + scope.plotData = scope.plotData || { points: [], average: 0 }; scope.$watch('plotData', @@ -92,13 +107,39 @@ .attr('class', 'graph-data-line'); } - chart.append('path') + var averageLine = chart.append('path') .datum(Array(numberOfPoints).fill(average)) .attr('d', line) .attr('class', 'graph-avg-line'); + + var displayAverageLabel = function(averageLine, label, value, color, unit) { + var {x, y, width} = averageLine.node().getBoundingClientRect(); + label.value(value, unit); + + if (label.pointingToTheLeft) { + label.displayAt({x:x + width + window.pageXOffset, y:y + window.pageYOffset, color}); + } else { + label.displayAt({x:x + window.pageXOffset, y:y + window.pageYOffset, color}); + } + } + + chart.on("mouseover", function() { + var value = `${formatter.formatLargeNumber(average,scope.avgDecimals)}`; + var suffix = attrs.metricSuffix; + + if (scope.isDurationGraph) { + value = `${formatter.formatTime(average).value}`; + suffix = formatter.formatTime(average).unit.toUpperCase(); + } + + displayAverageLabel(averageLine, averageLabelToTheRight, value, attrs.avgLabelColor, suffix); + }) + .on("mouseout", function(){ + averageLabelToTheRight.hide(); + }); }); } }; - }); + }); }(window, window.angular, window.d3)); \ No newline at end of file diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js index dd70472593..6350ced1a5 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.largeGraph.js @@ -1,6 +1,11 @@ -(function(window, angular, d3) { +import ArrowLabel from './ui.particular.arrowLabel'; + +(function(window, angular, d3) { 'use strict'; - + + const averageDecimalsDefault = 2; + const avgLabelSuffixDefault = ''; + var averageLabelToTheRight = ArrowLabel({pointToTheLeft: false, caption: 'AVG'}); var averageLabelToTheLeft = ArrowLabel({pointToTheLeft: true, caption: 'AVG'}); @@ -43,14 +48,14 @@ var group = chart.append('g').attr('class', 'dataAverage'); - var avgLine = group.append('path') + var avgLine = group.append('path') .datum(Array(data.points.length).fill(data.average)) .attr('d', line) .attr('stroke', color) .attr('stroke-width', 1.5) .attr('opacity', 0.5) .attr('stroke-dasharray', '10,10'); - + return avgLine; } @@ -83,10 +88,14 @@ isDurationGraph: '=isDurationGraph', minimumYaxis: '@', width: '=plotWidth', - height: '=plotHeight' + height: '=plotHeight', + avgDecimals: '@' }, template: '', - link: function link(scope, element, attrs) { + link: function link(scope, element, attrs) { + scope.avgDecimals = scope.avgDecimals || averageDecimalsDefault; + attrs.metricSuffix = attrs.metricSuffix || avgLabelSuffixDefault; + scope.$watch('firstDataSeries', function () { var svg = element.find('svg')[0]; @@ -170,26 +179,26 @@ var drawAverage = function(data, lineColor, fillColor) { return drawAverageLine(chart, data, lineColor, fillColor, scaleX, scaleY); } - - var displayAverageLabel = function(averageLine, label, value, color) { - var {x , y, width} = averageLine.node().getBoundingClientRect(); - label.value(`${value}`); - if(label.pointingToTheLeft){ + var displayAverageLabel = function(averageLine, label, value, color, unit) { + var {x, y, width} = averageLine.node().getBoundingClientRect(); + label.value(value, unit); + + if (label.pointingToTheLeft) { label.displayAt({x:x + width + window.pageXOffset, y:y + window.pageYOffset, color}); } else { label.displayAt({x:x + window.pageXOffset, y:y + window.pageYOffset, color}); } } - + drawSeries(firstSeries, attrs.firstSeriesColor, attrs.firstSeriesFillColor); if (secondSeries) { drawSeries(secondSeries, attrs.secondSeriesColor,attrs.secondSeriesFillColor); } - var firstAverageLine = drawAverage(firstSeries, attrs.firstSeriesColor, attrs.firstSeriesFillColor ); - + var firstAverageLine = drawAverage(firstSeries, attrs.firstSeriesColor, attrs.firstSeriesFillColor ); + var secondAverageLine = null; if (secondSeries) { @@ -197,22 +206,28 @@ } chart.on("mouseover", function() { - var value = `${firstSeries.average.toFixed(2)} ${attrs.metricSuffix}`; - if(scope.isDurationGraph){ - value = `${formatter.formatTime(firstSeries.average).value} ${formatter.formatTime(firstSeries.average).unit}`; + var value = `${formatter.formatLargeNumber(firstSeries.average, scope.avgDecimals)}`; + var suffix = attrs.metricSuffix; + + if (scope.isDurationGraph) { + value = `${formatter.formatTime(firstSeries.average).value}`; + suffix = formatter.formatTime(firstSeries.average).unit.toUpperCase(); } - displayAverageLabel(firstAverageLine, averageLabelToTheRight, value, attrs.firstSeriesColor,''); + displayAverageLabel(firstAverageLine, averageLabelToTheRight, value, attrs.firstSeriesColor, suffix); - if(secondAverageLine && secondSeries.points.length > 0){ - value = `${secondSeries.average.toFixed(2)} ${attrs.metricSuffix}`; - if(scope.isDurationGraph){ - value = `${formatter.formatTime(secondSeries.average).value} ${formatter.formatTime(secondSeries.average).unit}`; + if (secondAverageLine && secondSeries.points.length > 0) { + value = `${formatter.formatLargeNumber(secondSeries.average, scope.avgDecimals)}`; + + if (scope.isDurationGraph) { + value = `${formatter.formatTime(secondSeries.average).value}`; + suffix = formatter.formatTime(secondSeries.average).unit.toUpperCase(); } - displayAverageLabel(secondAverageLine, averageLabelToTheLeft, value, attrs.secondSeriesColor); + + displayAverageLabel(secondAverageLine, averageLabelToTheLeft, value, attrs.secondSeriesColor, suffix); } }) - .on("mouseout", function(){ + .on("mouseout", function() { averageLabelToTheRight.hide(); averageLabelToTheLeft.hide(); }); @@ -221,59 +236,4 @@ }; }); - function ArrowLabel({pointToTheLeft=false, caption=''}){ - - var div = document.createElement('div'); - div.style.position = 'absolute'; - div.style.zIndex = 10; - div.style.visibility = 'hidden'; - div.classList = `avg-tooltip${pointToTheLeft && ' left' || ''}`; - div.innerHTML = `
- ${caption} -
-
- 0 -
`; - document.body.appendChild(div); - - if(pointToTheLeft){ - div.style.right = 'inherit'; - } else { - div.style.left = 'inherit'; - } - - return { - displayAt: function({x, y, color}) { - var lableDimensions = getComputedStyle(div); - //align the label vertically. - div.style.top = `${Math.trunc(y - lableDimensions.height.replace('px', '') / 2)}px`; - - //align the label horizontally. - //get the label tip dimensions. The label tip is composed by a roated square the the ::before meta-element. - var labelTipWidth = getComputedStyle(div,':before').width.replace('px',''); - var labelTipHeight = getComputedStyle(div,':before').height.replace('px',''); - var lalbeTipHypotenuce = Math.trunc(Math.hypot(labelTipWidth,labelTipHeight)); - - if(pointToTheLeft == false) { - div.style.right = `calc(100% - ${x}px + ${lalbeTipHypotenuce / 2}px)`; - } else { - div.style.left = `${x + (lalbeTipHypotenuce / 2)}px`; - } - - div.style.visibility = 'visible'; - div.style.setProperty('--avg-tooltip-background-color', color); - }, - - hide: function() { - div.style.visibility = 'hidden'; - }, - - value: function(value){ - div.querySelector('.unit').innerHTML = `${value}` - }, - - pointingToTheLeft: pointToTheLeft - } - } - -}(window, window.angular, window.d3)); +}(window, window.angular, window.d3)); \ No newline at end of file diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html index 914dde1002..a0a014b456 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html +++ b/src/ServicePulse.Host/app/modules/monitoring/views/endpoint_details.html @@ -49,6 +49,7 @@

plot-height="200" first-series-color="#EA7E00" first-series-fill-color="#EADDCE" + avg-decimals="0" metric-suffix="MSGS" class="large-graph pull-left"> @@ -88,7 +89,7 @@

first-series-color="#176397" first-series-fill-color="#CADCE8" second-series-color="#CC1252" - second-series-fill-color="#E9C4D1" + second-series-fill-color="#E9C4D1" metric-suffix="MSGS/S" class="large-graph pull-left"> @@ -149,7 +150,7 @@

first-series-color="#2700CB" first-series-fill-color="#C4BCE5" second-series-color="#258135" - second-series-fill-color="#BEE6C5" + second-series-fill-color="#BEE6C5" is-duration-graph="true" class="large-graph pull-left"> @@ -290,7 +291,7 @@

- +
{{(instance.isStale == true || instance.isScMonitoringDisconnected == true) ? "" : instance.metrics.throughput.displayValue}} @@ -301,7 +302,7 @@
- +
{{(instance.isStale == true || instance.isScMonitoringDisconnected == true) ? "" : instance.metrics.retries.displayValue}} @@ -312,7 +313,7 @@
- +
{{(instance.isStale == true || instance.isScMonitoringDisconnected == true) ? "" : instance.metrics.processingTime.displayValue.value}} @@ -326,7 +327,7 @@
- +
{{(instance.isStale == true || instance.isScMonitoringDisconnected == true) ? "" : instance.metrics.criticalTime.displayValue.value}} @@ -430,7 +431,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : messageType.metrics.throughput.displayValue}} @@ -441,7 +442,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : messageType.metrics.retries.displayValue}} @@ -452,7 +453,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : messageType.metrics.processingTime.displayValue.value}} @@ -466,7 +467,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : messageType.metrics.criticalTime.displayValue.value}} diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list.html b/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list.html index 77577ee1ea..28d019341e 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list.html +++ b/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list.html @@ -79,7 +79,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.queueLength.displayValue}} @@ -90,7 +90,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.throughput.displayValue}} @@ -101,7 +101,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.retries.displayValue}} @@ -112,7 +112,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.processingTime.displayValue.value}} @@ -124,7 +124,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.criticalTime.displayValue.value}} diff --git a/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list_grouped.html b/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list_grouped.html index 6a1c19ec7b..fbadfed6ee 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list_grouped.html +++ b/src/ServicePulse.Host/app/modules/monitoring/views/monitored_endpoints_list_grouped.html @@ -81,7 +81,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.queueLength.displayValue}} @@ -92,7 +92,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.throughput.displayValue}} @@ -103,7 +103,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.retries.displayValue}} @@ -114,7 +114,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.processingTime.displayValue.value}} @@ -126,7 +126,7 @@
- +
{{(endpoint.isStale == true || endpoint.isScMonitoringDisconnected == true) ? "" : endpoint.metrics.criticalTime.displayValue.value}} From 7388823155effa3e9d678bcdf80129cb475bbc0c Mon Sep 17 00:00:00 2001 From: Christian Date: Wed, 13 Jul 2022 20:42:37 -0600 Subject: [PATCH 5/5] avg label styling improvements --- src/ServicePulse.Host/app/css/particular.css | 11 +++++++---- .../js/directives/ui.particular.arrowLabel.js | 4 ++-- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/ServicePulse.Host/app/css/particular.css b/src/ServicePulse.Host/app/css/particular.css index 9434e77777..cfd97653ea 100644 --- a/src/ServicePulse.Host/app/css/particular.css +++ b/src/ServicePulse.Host/app/css/particular.css @@ -3526,6 +3526,8 @@ g.error .node-text .lead.saga { g.error .node-text a:hover { text-decoration: underline; +} + :root { --avg-tooltip-background-color: #000; } @@ -3570,11 +3572,12 @@ div.avg-tooltip.left:before { left:0; } -div.avg-tooltip .unit { +div.avg-tooltip .value { font-size: 14px; + font-weight: bold; } -div.avg-tooltip .unit span { +div.avg-tooltip .value span { font-size: 11px; -} -} + font-weight: normal; +} \ No newline at end of file diff --git a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js index 7009626e4e..b377f50ebf 100644 --- a/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js +++ b/src/ServicePulse.Host/app/modules/monitoring/js/directives/ui.particular.arrowLabel.js @@ -8,7 +8,7 @@ export default function ArrowLabel({ pointToTheLeft = false, caption = '' }) { div.innerHTML = `
${caption}
-
+
0
`; document.body.appendChild(div); @@ -42,7 +42,7 @@ export default function ArrowLabel({ pointToTheLeft = false, caption = '' }) { }, value: function (value, unit) { - div.querySelector('.unit').innerHTML = `${value} ${unit}`; + div.querySelector('.value').innerHTML = `${value} ${unit}`; }, pointingToTheLeft: pointToTheLeft