diff options
author | mkidd <michael.kidd@est.tech> | 2021-02-26 18:27:03 +0000 |
---|---|---|
committer | Michael Kidd <michael.kidd@est.tech> | 2021-03-03 11:29:21 +0000 |
commit | 4f6e6490aa469135379fd2814326e44652caf52f (patch) | |
tree | f46d59ef54a043054fb8b3bd8e1f2b4e771b920e /gui-pdp-monitoring/src | |
parent | b953083d931ae0ac0ae657bde62fd39483a6c67e (diff) |
fix bugs in MonitoringChart.js
removed redundant variables that re declared themselves
refactored coded that repeated as a function
Issue-ID: POLICY-3095
Signed-off-by: mkidd <michael.kidd@est.tech>
Change-Id: I14be896ecb8d2f50ee5dc0c61009c6c2cab3e442
Diffstat (limited to 'gui-pdp-monitoring/src')
-rw-r--r-- | gui-pdp-monitoring/src/webapp/js/MonitoringChart.js | 79 |
1 files changed, 33 insertions, 46 deletions
diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js index a9b5f33..2744469 100644 --- a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js +++ b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js @@ -1,6 +1,6 @@ /*- * ============LICENSE_START======================================================= - * Copyright (C) 2020 Nordix Foundation. + * Copyright (C) 2020-2021 Nordix Foundation. * ================================================================================ * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. @@ -60,11 +60,7 @@ function createChart(data, container, title, unit, lineStroke, nodeColour) { // Set the unit for the value svg.attr("unit", unit); - // Format the data for the chart - data.forEach(function(d) { - d.timestamp = d.timestamp; - d.value = +d.value; - }); + data = formatDataForChart(data); // Scale the range of the data x.domain(d3.extent(data, function(d) { @@ -98,22 +94,8 @@ function createChart(data, container, title, unit, lineStroke, nodeColour) { }) // Apply the tooltip to each node - .on( - "mouseover", - function(d) { - d3.select("body").select(".tooltip").transition() - .duration(50).style("opacity", 1); - d3.select("body").select(".tooltip").html( - formatDate(new Date(d.timestamp)) + "<br/>" - + d.value + (unit ? " " + unit : "")) - .style("left", (d3.event.pageX) + "px").style( - "top", (d3.event.pageY - 28) + "px"); - }).on( - "mouseout", - function(d) { - d3.select("body").select(".tooltip").transition() - .duration(500).style("opacity", 0); - }); + .on("mouseover", handleMouseOver) + .on("mouseout", handleMouseOut); // Add the X Axis svg.append("g").attr("class", "x axis").attr("transform", @@ -158,13 +140,8 @@ function updateChart(container, data, nodeColour) { left : 50 }, width = 600 - margin.left - margin.right, height = 270 - margin.top - margin.bottom; - var parseDate = d3.time.format("%d-%b-%y").parse; - // Format the data for the chart - data.forEach(function(d) { - d.timestamp = d.timestamp; - d.value = +d.value; - }); + data = formatDataForChart(data); // Select the chart var svg = d3.select(container); @@ -195,8 +172,6 @@ function updateChart(container, data, nodeColour) { return y(d.value); }); - var unit = svg.select(".line").attr("unit"); - // Remove all nodes svg.selectAll("circle").remove(); @@ -223,22 +198,8 @@ function updateChart(container, data, nodeColour) { }) // Apply the tooltip to each node - .on( - "mouseover", - function(d) { - d3.select("body").select(".tooltip").transition() - .duration(50).style("opacity", 1); - d3.select("body").select(".tooltip").html( - formatDate(new Date(d.timestamp)) + "<br/>" - + d.value + (unit ? " " + unit : "")) - .style("left", (d3.event.pageX) + "px").style( - "top", (d3.event.pageY - 28) + "px"); - }).on( - "mouseout", - function(d) { - d3.select("body").select(".tooltip").transition() - .duration(500).style("opacity", 0); - }); + .on("mouseover", handleMouseOver) + .on("mouseout", handleMouseOut); } @@ -257,4 +218,30 @@ function formatDate(date) { return date.toLocaleString().replace(',', ''); } +function formatDataForChart(data) { + // Format the data for the chart + data.forEach(function(d) { + d.value = +d.value; + }); + + return data; +} + +function handleMouseOver(d) { + var unit = svg.select(".line").attr("unit"); + + d3.select("body").select(".tooltip").transition() + .duration(50).style("opacity", 1); + d3.select("body").select(".tooltip").html( + formatDate(new Date(d.timestamp)) + "<br/>" + + d.value + (unit ? " " + unit : "")) + .style("left", (d3.event.pageX) + "px").style( + "top", (d3.event.pageY - 28) + "px"); +} + +function handleMouseOut(d) { + d3.select("body").select(".tooltip").transition() + .duration(500).style("opacity", 0); +} + export { initTooltip, createChart, updateChart, generateRandomData };
\ No newline at end of file |