tyler.durden
/
pandorafms
mirror of https://github.com/pandorafms/pandorafms.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Fixed errors VC

This commit is contained in:
Daniel Barbero Martin 2020-02-10 17:31:48 +01:00
parent d99d31b432
commit 0042f390ef
12 changed files with 238 additions and 191 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
pandora_console/general/header.php
View File

@ -213,8 +213,10 @@ if ($config['menu_type'] == 'classic') {
$select[0]['autorefresh_white_list'] $select[0]['autorefresh_white_list']
); );
if ($_GET['sec2'] === 'operation/visual_console/render_view' if ($config['legacy_vc']
&& $config['legacy_vc'] || ($_GET['sec2'] !== 'operation/visual_console/render_view')
|| (($_GET['sec2'] !== 'operation/visual_console/render_view')
&& $config['legacy_vc'])
) { ) {
if ($autorefresh_list !== null if ($autorefresh_list !== null
&& array_search($_GET['sec2'], $autorefresh_list) !== false && array_search($_GET['sec2'], $autorefresh_list) !== false

328
pandora_console/include/graphs/bullet.js
View File

@ -1,10 +1,11 @@
/* globals d3 */
(function() { (function() {
// Chart design based on the recommendations of Stephen Few. Implementation
// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
// http://projects.instantcognition.com/protovis/bulletchart/
// Chart design based on the recommendations of Stephen Few. Implementation d3.bullet = function() {
// based on the work of Clint Ivy, Jamie Love, and Jason Davies. var orient = "right", // TODO top & bottom
// http://projects.instantcognition.com/protovis/bulletchart/
d3.bullet = function() {
var orient = "right", // TODO top & bottom
reverse = false, reverse = false,
duration = 0, duration = 0,
ranges = bulletRanges, ranges = bulletRanges,
@ -14,228 +15,259 @@ d3.bullet = function() {
height = 30, height = 30,
tickFormat = null; tickFormat = null;
// For each small multiple… // For each small multiple…
function bullet(g) { function bullet(g) {
g.each(function(d, i) { g.each(function(d, i) {
var rangez = ranges.call(this, d, i).slice().sort(d3.descending), var rangez = ranges
markerz = markers.call(this, d, i).slice().sort(d3.descending), .call(this, d, i)
measurez = measures.call(this, d, i).slice().sort(d3.descending), .slice()
.sort(d3.descending),
markerz = markers
.call(this, d, i)
.slice()
.sort(d3.descending),
measurez = measures
.call(this, d, i)
.slice()
.sort(d3.descending),
g = d3.select(this); g = d3.select(this);
// Compute the new x-scale. // Compute the new x-scale.
var x1 = d3.scale.linear() var x1 = d3.scale
.linear()
.domain([0, Math.max(rangez[0], markerz[0], measurez[0])]) .domain([0, Math.max(rangez[0], markerz[0], measurez[0])])
.range(reverse ? [width, 0] : [0, width-160]); .range(reverse ? [width, 0] : [0, width - 160]);
// Retrieve the old x-scale, if this is an update. // Retrieve the old x-scale, if this is an update.
var x0 = this.__chart__ || d3.scale.linear() var x0 =
.domain([0, Infinity]) this.__chart__ ||
.range(x1.range()); d3.scale
.linear()
.domain([0, Infinity])
.range(x1.range());
// Stash the new scale. // Stash the new scale.
this.__chart__ = x1; this.__chart__ = x1;
// Derive width-scales from the x-scales. // Derive width-scales from the x-scales.
var w0 = bulletWidth(x0), var w0 = bulletWidth(x0),
w1 = bulletWidth(x1); w1 = bulletWidth(x1);
// Update the range rects. // Update the range rects.
var range = g.selectAll("rect.range") var range = g.selectAll("rect.range").data(rangez);
.data(rangez);
range.enter().append("rect") range
.attr("class", function(d, i) { return "range s" + i; }) .enter()
.append("rect")
.attr("class", function(d, i) {
return "range s" + i;
})
.attr("width", w0) .attr("width", w0)
.attr("height", height) .attr("height", height)
.attr("x", reverse ? x0 : 0) .attr("x", reverse ? x0 : 0)
.transition() .transition()
.duration(duration) .duration(duration)
.attr("width", w1) .attr("width", w1)
.attr("x", reverse ? x1 : 0); .attr("x", reverse ? x1 : 0);
range.transition() range
.transition()
.duration(duration) .duration(duration)
.attr("x", reverse ? x1 : 0) .attr("x", reverse ? x1 : 0)
.attr("width", w1) .attr("width", w1)
.attr("height", height); .attr("height", height);
// Update the measure rects. // Update the measure rects.
var measure = g.selectAll("rect.measure") var measure = g.selectAll("rect.measure").data(measurez);
.data(measurez);
measure.enter().append("rect") measure
.attr("class", function(d, i) { return "measure s" + i; }) .enter()
.append("rect")
.attr("class", function(d, i) {
return "measure s" + i;
})
.attr("width", w0) .attr("width", w0)
.attr("height", height / 3) .attr("height", height / 3)
.attr("x", reverse ? x0 : 0) .attr("x", reverse ? x0 : 0)
.attr("y", height / 3) .attr("y", height / 3)
.transition() .transition()
.duration(duration) .duration(duration)
.attr("width", w1) .attr("width", w1)
.attr("x", reverse ? x1 : 0); .attr("x", reverse ? x1 : 0);
measure.transition() measure
.transition()
.duration(duration) .duration(duration)
.attr("width", w1) .attr("width", w1)
.attr("height", height / 3) .attr("height", height / 3)
.attr("x", reverse ? x1 : 0) .attr("x", reverse ? x1 : 0)
.attr("y", height / 3); .attr("y", height / 3);
// Update the marker lines. // Update the marker lines.
var marker = g.selectAll("line.marker") var marker = g.selectAll("line.marker").data(markerz);
.data(markerz);
marker.enter().append("line") marker
.attr("class", function(d, i) { return "marker s" + i; }) .enter()
.append("line")
.attr("class", function(d, i) {
return "marker s" + i;
})
.attr("x1", x0) .attr("x1", x0)
.attr("x2", x0) .attr("x2", x0)
.attr("y1", height / 6) .attr("y1", height / 6)
.attr("y2", height * 5 / 6) .attr("y2", (height * 5) / 6)
.transition() .transition()
.duration(duration) .duration(duration)
.attr("x1", x1) .attr("x1", x1)
.attr("x2", x1); .attr("x2", x1);
marker.transition() marker
.transition()
.duration(duration) .duration(duration)
.attr("x1", x1) .attr("x1", x1)
.attr("x2", x1) .attr("x2", x1)
.attr("y1", height / 6) .attr("y1", height / 6)
.attr("y2", height * 5 / 6); .attr("y2", (height * 5) / 6);
// Compute the tick format. // Compute the tick format.
var format = tickFormat || x1.tickFormat(8); var format = tickFormat || x1.tickFormat(8);
// Update the tick groups. // Update the tick groups.
var tick = g.selectAll("g.tick") var tick = g.selectAll("g.tick").data(x1.ticks(8), function(d) {
.data(x1.ticks(8), function(d) { return this.textContent || format(d);
return this.textContent || format(d); });
});
// Initialize the ticks with the old scale, x0. // Initialize the ticks with the old scale, x0.
var tickEnter = tick.enter().append("g") var tickEnter = tick
.enter()
.append("g")
.attr("class", "tick") .attr("class", "tick")
.attr("transform", bulletTranslate(x0)) .attr("transform", bulletTranslate(x0))
.style("opacity", 1e-6); .style("opacity", 1e-6);
tickEnter.append("line") tickEnter
.append("line")
.attr("y1", height) .attr("y1", height)
.attr("y2", height * 7 / 6); .attr("y2", (height * 7) / 6);
tickEnter.append("text") tickEnter
.append("text")
.attr("text-anchor", "middle") .attr("text-anchor", "middle")
.attr("dy", "1em") .attr("dy", "1em")
.attr("y", height * 7 / 6) .attr("y", (height * 7) / 6)
.text(format); .text(format);
// Transition the entering ticks to the new scale, x1. // Transition the entering ticks to the new scale, x1.
tickEnter.transition() tickEnter
.transition()
.duration(duration) .duration(duration)
.attr("transform", bulletTranslate(x1)) .attr("transform", bulletTranslate(x1))
.style("opacity", 1); .style("opacity", 1);
// Transition the updating ticks to the new scale, x1. // Transition the updating ticks to the new scale, x1.
var tickUpdate = tick.transition() var tickUpdate = tick
.transition()
.duration(duration) .duration(duration)
.attr("transform", bulletTranslate(x1)) .attr("transform", bulletTranslate(x1))
.style("opacity", 1); .style("opacity", 1);
tickUpdate.select("line") tickUpdate
.select("line")
.attr("y1", height) .attr("y1", height)
.attr("y2", height + 7); .attr("y2", height + 7);
tickUpdate.select("text") tickUpdate.select("text").attr("y", height + 7);
.attr("y", height + 7);
// Transition the exiting ticks to the new scale, x1. // Transition the exiting ticks to the new scale, x1.
tick.exit().transition() tick
.exit()
.transition()
.duration(duration) .duration(duration)
.attr("transform", bulletTranslate(x1)) .attr("transform", bulletTranslate(x1))
.style("opacity", 1e-6) .style("opacity", 1e-6)
.remove(); .remove();
}); });
d3.timer.flush(); d3.timer.flush();
}
// left, right, top, bottom
bullet.orient = function(x) {
if (!arguments.length) return orient;
orient = x;
reverse = orient == "right" || orient == "bottom";
return bullet;
};
// ranges (bad, satisfactory, good)
bullet.ranges = function(x) {
if (!arguments.length) return ranges;
ranges = x;
return bullet;
};
// markers (previous, goal)
bullet.markers = function(x) {
if (!arguments.length) return markers;
markers = x;
return bullet;
};
// measures (actual, forecast)
bullet.measures = function(x) {
if (!arguments.length) return measures;
measures = x;
return bullet;
};
bullet.width = function(x) {
if (!arguments.length) return width;
width = x;
return bullet;
};
bullet.height = function(x) {
if (!arguments.length) return height;
height = x;
return bullet;
};
bullet.tickFormat = function(x) {
if (!arguments.length) return tickFormat;
tickFormat = x;
return bullet;
};
bullet.duration = function(x) {
if (!arguments.length) return duration;
duration = x;
return bullet;
};
return bullet;
};
function bulletRanges(d) {
return d.ranges;
} }
// left, right, top, bottom function bulletMarkers(d) {
bullet.orient = function(x) { return d.markers;
if (!arguments.length) return orient; }
orient = x;
reverse = orient == "right" || orient == "bottom";
return bullet;
};
// ranges (bad, satisfactory, good) function bulletMeasures(d) {
bullet.ranges = function(x) { return d.measures;
if (!arguments.length) return ranges; }
ranges = x;
return bullet;
};
// markers (previous, goal) function bulletTranslate(x) {
bullet.markers = function(x) { return function(d) {
if (!arguments.length) return markers; return "translate(" + x(d) + ",0)";
markers = x; };
return bullet; }
};
// measures (actual, forecast) function bulletWidth(x) {
bullet.measures = function(x) { var x0 = x(0);
if (!arguments.length) return measures; return function(d) {
measures = x; return Math.abs(x(d) - x0);
return bullet; };
}; }
})();
bullet.width = function(x) {
if (!arguments.length) return width;
width = x;
return bullet;
};
bullet.height = function(x) {
if (!arguments.length) return height;
height = x;
return bullet;
};
bullet.tickFormat = function(x) {
if (!arguments.length) return tickFormat;
tickFormat = x;
return bullet;
};
bullet.duration = function(x) {
if (!arguments.length) return duration;
duration = x;
return bullet;
};
return bullet;
};
function bulletRanges(d) {
return d.ranges;
}
function bulletMarkers(d) {
return d.markers;
}
function bulletMeasures(d) {
return d.measures;
}
function bulletTranslate(x) {
return function(d) {
return "translate(" + x(d) + ",0)";
};
}
function bulletWidth(x) {
var x0 = x(0);
return function(d) {
return Math.abs(x(d) - x0);
};
}
})();

40
pandora_console/include/graphs/functions_d3.php
View File

@ -175,12 +175,15 @@ function d3_bullet_chart(
$output = ''; $output = '';
$output .= include_javascript_d3(true); $output .= include_javascript_d3(true);
$output .= '<script language="javascript" type="text/javascript">';
$output .= file_get_contents($homeurl.'include/graphs/bullet.js');
$output .= '</script>';
$id_bullet = uniqid(); $id_bullet = uniqid();
$font = array_shift(explode('.', array_pop(explode('/', $font)))); $font = array_shift(explode('.', array_pop(explode('/', $font))));
$output .= '<div id="bullet_graph_'.$id_bullet.'" class="bullet" style="overflow: hidden; width: '.$width.'px; margin-left: auto; margin-right: auto;"></div> $output .= '<div id="bullet_graph_'.$id_bullet.'" class="bullet" style="overflow: hidden; width: '.$width.'px; margin-left: auto; margin-right: auto;"></div>
<style> <style>
.bullet_graph { .bullet_graph {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto; margin: auto;
@ -188,7 +191,7 @@ function d3_bullet_chart(
position: relative; position: relative;
width: 100%; width: 100%;
} }
.bullet { font: 7px sans-serif; } .bullet { font: 7px sans-serif; }
.bullet .marker.s0 { stroke: #e63c52; stroke-width: 2px; } .bullet .marker.s0 { stroke: #e63c52; stroke-width: 2px; }
.bullet .marker.s1 { stroke: #f3b200; stroke-width: 2px; } .bullet .marker.s1 { stroke: #f3b200; stroke-width: 2px; }
@ -204,14 +207,13 @@ function d3_bullet_chart(
.bullet g text { font-size:'.$font_size.'pt;} .bullet g text { font-size:'.$font_size.'pt;}
</style> </style>
<script src="'.$homeurl.'include/graphs/bullet.js"></script>
<script language="javascript" type="text/javascript"> <script language="javascript" type="text/javascript">
var margin = {top: 5, right: 40, bottom: 20, left: 120}; var margin = {top: 5, right: 40, bottom: 20, left: 120};
width = ('.$width.'+10); var width = ('.$width.'+10);
height = '.$height.'- margin.top - margin.bottom; var height = '.$height.'- margin.top - margin.bottom;
var chart = d3.bullet() var chart = d3.bullet()
.width(width) .width(width)
.height(height) .height(height)
@ -240,7 +242,6 @@ function d3_bullet_chart(
$output .= 'var data = ['.implode(',', $temp).']; $output .= 'var data = ['.implode(',', $temp).'];
'; ';
$output .= ' $output .= '
var svg = d3.select("#bullet_graph_'.$id_bullet.'").selectAll("svg") var svg = d3.select("#bullet_graph_'.$id_bullet.'").selectAll("svg")
.data(data) .data(data)
.enter().append("svg") .enter().append("svg")
@ -250,33 +251,30 @@ function d3_bullet_chart(
.append("g") .append("g")
.attr("transform", "translate(" + (margin.left) + "," + margin.top + ")") .attr("transform", "translate(" + (margin.left) + "," + margin.top + ")")
.call(chart); .call(chart);
var title = svg.append("g") var title = svg.append("g")
.style("text-anchor", "end") .style("text-anchor", "end")
.attr("transform", "translate(-10, 15)"); .attr("transform", "translate(-10, 15)");
title.append("text") title.append("text")
.attr("class", "'.$font.'") .attr("class", "'.$font.'")
.text(function(d) { return d.title; }); .text(function(d) { return d.title; });
title.append("text") title.append("text")
.attr("class", "subtitle") .attr("class", "subtitle")
.attr("dy", "1em") .attr("dy", "1em")
.text(function(d) { return d.subtitle; }); .text(function(d) { return d.subtitle; });
$(".tick>text").each(function() { $(".tick>text").each(function() {
var label = $(this).text().replace(/,/g,"");
label = $(this).text().replace(/,/g,"");
label = parseFloat(label); label = parseFloat(label);
text = label.toLocaleString(); var text = label.toLocaleString();
if ( label >= 1000000) if ( label >= 1000000)
text = text.substring(0,3) + "M"; text = text.substring(0,3) + "M";
else if (label >= 100000) else if (label >= 100000)
text = text.substring(0,3) + "K"; text = text.substring(0,3) + "K";
else if (label >= 1000) else if (label >= 1000)
text = text.substring(0,2) + "K"; text = text.substring(0,2) + "K";
$(this).text(text); $(this).text(text);
}); });
</script>'; </script>';

16
pandora_console/include/rest-api/models/VisualConsole/Item.php
View File

@ -2248,8 +2248,6 @@ class Item extends CachedModel
); );
} }
$fields[0] = __('None');
$getAllVisualConsoleValue = $values['linkedLayoutId']; $getAllVisualConsoleValue = $values['linkedLayoutId'];
if (\is_metaconsole() === true) { if (\is_metaconsole() === true) {
$getAllVisualConsoleValue = $values['linkedLayoutId']; $getAllVisualConsoleValue = $values['linkedLayoutId'];
@ -2262,12 +2260,14 @@ class Item extends CachedModel
$inputs[] = [ $inputs[] = [
'label' => __('Linked visual console'), 'label' => __('Linked visual console'),
'arguments' => [ 'arguments' => [
'type' => 'select', 'type' => 'select',
'fields' => $fields, 'fields' => $fields,
'name' => 'getAllVisualConsole', 'name' => 'getAllVisualConsole',
'selected' => $getAllVisualConsoleValue, 'selected' => $getAllVisualConsoleValue,
'script' => 'linkedVisualConsoleChange()', 'script' => 'linkedVisualConsoleChange()',
'return' => true, 'return' => true,
'nothing' => __('None'),
'nothing_value' => 0,
], ],
]; ];

14
pandora_console/include/rest-api/models/VisualConsole/Items/ModuleGraph.php
View File

@ -426,8 +426,6 @@ final class ModuleGraph extends Item
[] []
); );
$data[0] = __('None');
return $data; return $data;
} }
@ -573,11 +571,13 @@ final class ModuleGraph extends Item
'hidden' => $hiddenCustom, 'hidden' => $hiddenCustom,
'label' => __('Custom graph'), 'label' => __('Custom graph'),
'arguments' => [ 'arguments' => [
'type' => 'select', 'type' => 'select',
'fields' => $fields, 'fields' => $fields,
'name' => 'customGraphId', 'name' => 'customGraphId',
'selected' => $values['customGraphId'], 'selected' => $values['customGraphId'],
'return' => true, 'return' => true,
'nothing' => __('None'),
'nothing_value' => 0,
], ],
]; ];

4
pandora_console/include/visual-console-client/vc.main.css
View File

@ -710,6 +710,10 @@ div.module-graph {
min-height: fit-content; min-height: fit-content;
} }
.textDecorationNone:hover {
text-decoration: none;
}
/* Styles for the solid icons */ /* Styles for the solid icons */
.fa { .fa {

2
pandora_console/include/visual-console-client/vc.main.css.map
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
pandora_console/include/visual-console-client/vc.main.min.js.map
View File

File diff suppressed because one or more lines are too long

1
pandora_console/operation/visual_console/view.php
View File

@ -505,6 +505,7 @@ if ($edit_capable === true) {
$('#edit-controls').css('visibility', ''); $('#edit-controls').css('visibility', '');
} else { } else {
visualConsoleManager.visualConsole.disableEditMode(); visualConsoleManager.visualConsole.disableEditMode();
visualConsoleManager.visualConsole.unSelectItems();
visualConsoleManager.changeUpdateInterval(<?php echo ($refr * 1000); ?>); // To ms. visualConsoleManager.changeUpdateInterval(<?php echo ($refr * 1000); ?>); // To ms.
$('#edit-controls').css('visibility', 'hidden'); $('#edit-controls').css('visibility', 'hidden');
} }

10
visual_console_client/src/Item.ts
View File

@ -486,12 +486,18 @@ abstract class VisualConsoleItem<Props extends ItemProps> {
let box; let box;
if (this.props.isLinkEnabled) { if (this.props.isLinkEnabled) {
box = document.createElement("a") as HTMLAnchorElement; box = document.createElement("a") as HTMLAnchorElement;
if (this.props.link) box.href = this.props.link;
if (this.props.link) {
box.href = this.props.link;
} else {
box.className = "textDecorationNone";
}
} else { } else {
box = document.createElement("div") as HTMLDivElement; box = document.createElement("div") as HTMLDivElement;
box.className = "textDecorationNone";
} }
box.className = "visual-console-item"; box.classList.add("visual-console-item");
if (this.props.isOnTop) { if (this.props.isOnTop) {
box.classList.add("is-on-top"); box.classList.add("is-on-top");
} }

4
visual_console_client/src/main.css
View File

@ -531,3 +531,7 @@ div.module-graph {
min-width: fit-content; min-width: fit-content;
min-height: fit-content; min-height: fit-content;
} }
.textDecorationNone:hover {
text-decoration: none;
}