aboutsummaryrefslogtreecommitdiffstats
path: root/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
diff options
context:
space:
mode:
authorbrunomilitzer <bruno.militzer@est.tech>2022-01-21 09:52:42 +0000
committerbrunomilitzer <bruno.militzer@est.tech>2022-01-21 09:52:48 +0000
commit7be95544827a95524a9b683d946ee7473e6854f9 (patch)
treedecabe3a248564ca0391d63dc33f4b88e4545a7c /gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
parent1ef0fcce1314a8c3cccf207e271014bb2f1f4c22 (diff)
Removed PDP Monitoring from GUI
Issue-ID: POLICY-3888 Change-Id: If59a7b7ad3074e718772051e2a13134eadb54997 Signed-off-by: brunomilitzer <bruno.militzer@est.tech>
Diffstat (limited to 'gui-pdp-monitoring/src/webapp/js/MonitoringChart.js')
-rw-r--r--gui-pdp-monitoring/src/webapp/js/MonitoringChart.js247
1 files changed, 0 insertions, 247 deletions
diff --git a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js b/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
deleted file mode 100644
index 94a18df..0000000
--- a/gui-pdp-monitoring/src/webapp/js/MonitoringChart.js
+++ /dev/null
@@ -1,247 +0,0 @@
-/*-
- * ============LICENSE_START=======================================================
- * 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.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS,
- * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
- * See the License for the specific language governing permissions and
- * limitations under the License.
- *
- * SPDX-License-Identifier: Apache-2.0
- * ============LICENSE_END=========================================================
- */
-
-import * as d3 from "d3";
-
-/*
- * Create a chart and append it to a container
- */
-function createChart(data, container, title, unit, lineStroke, nodeColour) {
- // Set the dimensions of the canvas
- var margin = {
- top: 30,
- right: 20,
- bottom: 30,
- left: 50
- }, width = 600 - margin.left - margin.right, height = 270 - margin.top
- - margin.bottom;
-
- // Set the ranges
- 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);
-
- var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
- -width).outerTickSize(0).tickPadding(10);
-
- // Define the line
- var valueline = d3.svg.line().x(function (d) {
- return x(d.timestamp);
- }).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 + ")");
-
- // Set the unit for the value
- svg.attr("unit", unit);
-
- data = formatDataForChart(data);
-
- // Scale the range of the data
- x.domain(d3.extent(data, function (d) {
- return d.timestamp;
- }));
- y.domain([0, d3.max(data, function (d) {
- return Math.ceil((d.value + 1) / 10) * 10;
- })]);
-
- // Set the colour of the line
- if (!lineStroke) {
- lineStroke = "#5fbadd"
- }
-
- // Set the colour of the circles
- if (!nodeColour) {
- nodeColour = "#00A9D4"
- }
-
- // Add the valueline path
- svg.append("path").attr("class", "line").data(data).attr("unit", unit)
- .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);
- })
-
- // 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);
-
- // 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);
-
- // Add the background
- svg.selectAll(".tick:not(:first-of-type) line").attr("stroke", "#777")
- .attr("stroke-dasharray", "2,2");
-}
-
-/*
- * Generates random chart data. Used when initializing the charts so that they
- * are not empty on load
- */
-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
- });
- }
- return data;
-}
-
-/*
- * Update a chart belonging to a specific container
- */
-function updateChart(container, data, nodeColour) {
- var margin = {
- top: 30,
- right: 20,
- bottom: 30,
- left: 50
- }, width = 600 - margin.left - margin.right, height = 270 - margin.top
- - margin.bottom;
-
- data = formatDataForChart(data);
-
- // Select the chart
- var svg = d3.select(container);
-
- // Set the ranges
- 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);
-
- var yAxis = d3.svg.axis().scale(y).orient("left").ticks(10).innerTickSize(
- -width).outerTickSize(0).tickPadding(10);
-
- // Scale the range of the data
- x.domain(d3.extent(data, function (d) {
- return d.timestamp;
- }));
- 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) {
- return x(d.timestamp);
- }).y(function (d) {
- return y(d.value);
- });
-
- // Remove all nodes
- svg.selectAll("circle").remove();
-
- // Set the node colour if one is passed in
- if (!nodeColour) {
- nodeColour = "#00A9D4"
- }
-
- // Make the changes
- svg.select(".line").data(data) // change the line
- .transition().duration(750).attr("d", valueline(data));
- svg.select(".x.axis") // change the x axis
- .transition().duration(750).call(xAxis.ticks(5));
- svg.select(".y.axis") // change the y axis
- .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);
- })
-
- // Apply the tooltip to each node
- .on("mouseover", handleMouseOver)
- .on("mouseout", handleMouseOut);
-
-}
-
-/*
- * Initialize a singleton div used as a floating tooltip for all charts
- */
-function initTooltip() {
- d3.select("body").append("div").attr("class", "tooltip").attr("id",
- "tooltip").style("opacity", 0);
-}
-
-/*
- * Format a date object to string
- */
-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};