aboutsummaryrefslogtreecommitdiffstats
path: root/gui-pdp-monitoring
diff options
context:
space:
mode:
authorJim Hahn <jrh3@att.com>2021-05-28 12:48:13 +0000
committerGerrit Code Review <gerrit@onap.org>2021-05-28 12:48:13 +0000
commit0bb797ed095b0d8a354ee6cac9f9842f0f6bcd5a (patch)
treea2309a4372112dc507c903d7e5d2d33ed791ab47 /gui-pdp-monitoring
parent4ea0f910d4ad5c15915eec49b5057d7af5c6dbf6 (diff)
parent87111eea8588fb30936a8f876f5f3feed61e7b8a (diff)
Merge "React Front-End UI"
Diffstat (limited to 'gui-pdp-monitoring')
-rw-r--r--gui-pdp-monitoring/pom.xml2
-rw-r--r--gui-pdp-monitoring/src/webapp/js/MonitoringChart.js136
2 files changed, 69 insertions, 69 deletions
diff --git a/gui-pdp-monitoring/pom.xml b/gui-pdp-monitoring/pom.xml
index 2108d91..4fe4491 100644
--- a/gui-pdp-monitoring/pom.xml
+++ b/gui-pdp-monitoring/pom.xml
@@ -87,7 +87,7 @@
<artifactId>frontend-maven-plugin</artifactId>
<version>1.9.1</version>
<configuration>
- <nodeVersion>v12.18.0</nodeVersion>
+ <nodeVersion>v14.17.0</nodeVersion>
<installDirectory>${webapp.dir}</installDirectory>
<workingDirectory>${webapp.dir}</workingDirectory>
<npmDownloadRoot>${repo.npm}</npmDownloadRoot>
diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
index 2744469..94a18df 100644
--- a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
+++ b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
@@ -26,36 +26,36 @@ import * as d3 from "d3";
function createChart(data, container, title, unit, lineStroke, nodeColour) {
// Set the dimensions of the canvas
var margin = {
- top : 30,
- right : 20,
- bottom : 30,
- left : 50
+ top: 30,
+ right: 20,
+ bottom: 30,
+ left: 50
}, width = 600 - margin.left - margin.right, height = 270 - margin.top
- - margin.bottom;
+ - margin.bottom;
// Set the ranges
- var x = d3.time.scale().range([ 0, width ]);
- var y = d3.scale.linear().range([ height, 0 ]);
+ var x = d3.time.scale().range([0, width]);
+ var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).innerTickSize(
- -height).outerTickSize(0).tickPadding(10);
+ -height).outerTickSize(0).tickPadding(10);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
- -width).outerTickSize(0).tickPadding(10);
+ -width).outerTickSize(0).tickPadding(10);
// Define the line
- var valueline = d3.svg.line().x(function(d) {
+ var valueline = d3.svg.line().x(function (d) {
return x(d.timestamp);
- }).y(function(d) {
+ }).y(function (d) {
return y(d.value);
});
// Add the svg canvas to the container
var svg = d3.select(container).append("svg").attr("preserveAspectRatio",
- "xMinYMin meet").attr("viewBox", "0 0 600 400").classed(
- "svg-content-responsive", true).append("g").attr("transform",
- "translate(" + margin.left + "," + margin.top + ")");
+ "xMinYMin meet").attr("viewBox", "0 0 600 400").classed(
+ "svg-content-responsive", true).append("g").attr("transform",
+ "translate(" + margin.left + "," + margin.top + ")");
// Set the unit for the value
svg.attr("unit", unit);
@@ -63,12 +63,12 @@ function createChart(data, container, title, unit, lineStroke, nodeColour) {
data = formatDataForChart(data);
// Scale the range of the data
- x.domain(d3.extent(data, function(d) {
+ x.domain(d3.extent(data, function (d) {
return d.timestamp;
}));
- y.domain([ 0, d3.max(data, function(d) {
+ y.domain([0, d3.max(data, function (d) {
return Math.ceil((d.value + 1) / 10) * 10;
- }) ]);
+ })]);
// Set the colour of the line
if (!lineStroke) {
@@ -82,36 +82,36 @@ function createChart(data, container, title, unit, lineStroke, nodeColour) {
// Add the valueline path
svg.append("path").attr("class", "line").data(data).attr("unit", unit)
- .attr("stroke", lineStroke).attr("d", valueline(data));
+ .attr("stroke", lineStroke).attr("d", valueline(data));
// Add the scatterplot
svg.selectAll("circle").data(data).enter().append("circle").attr("r", 3.5)
- .attr("class", "circle").attr("fill", nodeColour).attr("cx",
- function(d) {
- return x(d.timestamp);
- }).attr("cy", function(d) {
- return y(d.value);
- })
+ .attr("class", "circle").attr("fill", nodeColour).attr("cx",
+ function (d) {
+ return x(d.timestamp);
+ }).attr("cy", function (d) {
+ return y(d.value);
+ })
- // Apply the tooltip to each node
- .on("mouseover", handleMouseOver)
- .on("mouseout", handleMouseOut);
+ // Apply the tooltip to each node
+ .on("mouseover", handleMouseOver)
+ .on("mouseout", handleMouseOut);
// Add the X Axis
svg.append("g").attr("class", "x axis").attr("transform",
- "translate(0," + height + ")").call(xAxis);
+ "translate(0," + height + ")").call(xAxis);
// Add the Y Axis
svg.append("g").attr("class", "y axis").call(yAxis);
// Add the title
svg.append("text").attr("x", (width / 2)).attr("y", 0 - (margin.top / 2))
- .attr("text-anchor", "middle").style("font-size", "16px").style(
- "text-decoration", "underline").text(title);
+ .attr("text-anchor", "middle").style("font-size", "16px").style(
+ "text-decoration", "underline").text(title);
// Add the background
svg.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#777")
- .attr("stroke-dasharray", "2,2");
+ .attr("stroke-dasharray", "2,2");
}
/*
@@ -122,8 +122,8 @@ function generateRandomData() {
var data = [];
for (var i = 0; i < 30; i++) {
data.push({
- timestamp : new Date().getTime() - (i * 5000),
- value : Math.floor(Math.random() * 100) + 1
+ timestamp: new Date().getTime() - (i * 5000),
+ value: Math.floor(Math.random() * 100) + 1
});
}
return data;
@@ -134,12 +134,12 @@ function generateRandomData() {
*/
function updateChart(container, data, nodeColour) {
var margin = {
- top : 30,
- right : 20,
- bottom : 30,
- left : 50
+ top: 30,
+ right: 20,
+ bottom: 30,
+ left: 50
}, width = 600 - margin.left - margin.right, height = 270 - margin.top
- - margin.bottom;
+ - margin.bottom;
data = formatDataForChart(data);
@@ -147,28 +147,28 @@ function updateChart(container, data, nodeColour) {
var svg = d3.select(container);
// Set the ranges
- var x = d3.time.scale().range([ 0, width ]);
- var y = d3.scale.linear().range([ height, 0 ]);
+ var x = d3.time.scale().range([0, width]);
+ var y = d3.scale.linear().range([height, 0]);
// Define the axes
var xAxis = d3.svg.axis().scale(x).orient("bottom").ticks(5).innerTickSize(
- -height).outerTickSize(0).tickPadding(10);
+ -height).outerTickSize(0).tickPadding(10);
var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
- -width).outerTickSize(0).tickPadding(10);
+ -width).outerTickSize(0).tickPadding(10);
// Scale the range of the data
- x.domain(d3.extent(data, function(d) {
+ x.domain(d3.extent(data, function (d) {
return d.timestamp;
}));
- y.domain([ 0, d3.max(data, function(d) {
+ y.domain([0, d3.max(data, function (d) {
return Math.ceil((d.value + 1) / 10) * 10;
- }) ]);
+ })]);
// Update the valueline path
- var valueline = d3.svg.line().x(function(d) {
+ var valueline = d3.svg.line().x(function (d) {
return x(d.timestamp);
- }).y(function(d) {
+ }).y(function (d) {
return y(d.value);
});
@@ -182,24 +182,24 @@ function updateChart(container, data, nodeColour) {
// Make the changes
svg.select(".line").data(data) // change the line
- .transition().duration(750).attr("d", valueline(data));
+ .transition().duration(750).attr("d", valueline(data));
svg.select(".x.axis") // change the x axis
- .transition().duration(750).call(xAxis.ticks(5));
+ .transition().duration(750).call(xAxis.ticks(5));
svg.select(".y.axis") // change the y axis
- .transition().duration(750).call(yAxis);
+ .transition().duration(750).call(yAxis);
// Redraw the nodes based on the new data
svg.select("svg").select("g").selectAll("circle").data(data).enter()
- .append("circle").attr("r", 3.5).attr("class", "circle").attr(
- "fill", nodeColour).attr("cx", function(d) {
- return x(d.timestamp);
- }).attr("cy", function(d) {
- return y(d.value);
- })
+ .append("circle").attr("r", 3.5).attr("class", "circle").attr(
+ "fill", nodeColour).attr("cx", function (d) {
+ return x(d.timestamp);
+ }).attr("cy", function (d) {
+ return y(d.value);
+ })
- // Apply the tooltip to each node
- .on("mouseover", handleMouseOver)
- .on("mouseout", handleMouseOut);
+ // Apply the tooltip to each node
+ .on("mouseover", handleMouseOver)
+ .on("mouseout", handleMouseOut);
}
@@ -208,7 +208,7 @@ function updateChart(container, data, nodeColour) {
*/
function initTooltip() {
d3.select("body").append("div").attr("class", "tooltip").attr("id",
- "tooltip").style("opacity", 0);
+ "tooltip").style("opacity", 0);
}
/*
@@ -220,7 +220,7 @@ function formatDate(date) {
function formatDataForChart(data) {
// Format the data for the chart
- data.forEach(function(d) {
+ data.forEach(function (d) {
d.value = +d.value;
});
@@ -231,17 +231,17 @@ function handleMouseOver(d) {
var unit = svg.select(".line").attr("unit");
d3.select("body").select(".tooltip").transition()
- .duration(50).style("opacity", 1);
+ .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");
+ 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);
+ .duration(500).style("opacity", 0);
}
-export { initTooltip, createChart, updateChart, generateRandomData }; \ No newline at end of file
+export {initTooltip, createChart, updateChart, generateRandomData};