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

View File

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

View File

@ -1,9 +1,10 @@
/* globals d3 */
(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
// based on the work of Clint Ivy, Jamie Love, and Jason Davies.
// http://projects.instantcognition.com/protovis/bulletchart/
d3.bullet = function() {
d3.bullet = function() {
var orient = "right", // TODO top & bottom
reverse = false,
duration = 0,
@ -17,18 +18,31 @@ d3.bullet = function() {
// For each small multiple…
function bullet(g) {
g.each(function(d, i) {
var rangez = ranges.call(this, d, i).slice().sort(d3.descending),
markerz = markers.call(this, d, i).slice().sort(d3.descending),
measurez = measures.call(this, d, i).slice().sort(d3.descending),
var rangez = ranges
.call(this, d, i)
.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);
// 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])])
.range(reverse ? [width, 0] : [0, width-160]);
.range(reverse ? [width, 0] : [0, width - 160]);
// Retrieve the old x-scale, if this is an update.
var x0 = this.__chart__ || d3.scale.linear()
var x0 =
this.__chart__ ||
d3.scale
.linear()
.domain([0, Infinity])
.range(x1.range());
@ -40,11 +54,14 @@ d3.bullet = function() {
w1 = bulletWidth(x1);
// Update the range rects.
var range = g.selectAll("rect.range")
.data(rangez);
var range = g.selectAll("rect.range").data(rangez);
range.enter().append("rect")
.attr("class", function(d, i) { return "range s" + i; })
range
.enter()
.append("rect")
.attr("class", function(d, i) {
return "range s" + i;
})
.attr("width", w0)
.attr("height", height)
.attr("x", reverse ? x0 : 0)
@ -53,18 +70,22 @@ d3.bullet = function() {
.attr("width", w1)
.attr("x", reverse ? x1 : 0);
range.transition()
range
.transition()
.duration(duration)
.attr("x", reverse ? x1 : 0)
.attr("width", w1)
.attr("height", height);
// Update the measure rects.
var measure = g.selectAll("rect.measure")
.data(measurez);
var measure = g.selectAll("rect.measure").data(measurez);
measure.enter().append("rect")
.attr("class", function(d, i) { return "measure s" + i; })
measure
.enter()
.append("rect")
.attr("class", function(d, i) {
return "measure s" + i;
})
.attr("width", w0)
.attr("height", height / 3)
.attr("x", reverse ? x0 : 0)
@ -74,7 +95,8 @@ d3.bullet = function() {
.attr("width", w1)
.attr("x", reverse ? x1 : 0);
measure.transition()
measure
.transition()
.duration(duration)
.attr("width", w1)
.attr("height", height / 3)
@ -82,73 +104,84 @@ d3.bullet = function() {
.attr("y", height / 3);
// Update the marker lines.
var marker = g.selectAll("line.marker")
.data(markerz);
var marker = g.selectAll("line.marker").data(markerz);
marker.enter().append("line")
.attr("class", function(d, i) { return "marker s" + i; })
marker
.enter()
.append("line")
.attr("class", function(d, i) {
return "marker s" + i;
})
.attr("x1", x0)
.attr("x2", x0)
.attr("y1", height / 6)
.attr("y2", height * 5 / 6)
.attr("y2", (height * 5) / 6)
.transition()
.duration(duration)
.attr("x1", x1)
.attr("x2", x1);
marker.transition()
marker
.transition()
.duration(duration)
.attr("x1", x1)
.attr("x2", x1)
.attr("y1", height / 6)
.attr("y2", height * 5 / 6);
.attr("y2", (height * 5) / 6);
// Compute the tick format.
var format = tickFormat || x1.tickFormat(8);
// Update the tick groups.
var tick = g.selectAll("g.tick")
.data(x1.ticks(8), function(d) {
var tick = g.selectAll("g.tick").data(x1.ticks(8), function(d) {
return this.textContent || format(d);
});
// Initialize the ticks with the old scale, x0.
var tickEnter = tick.enter().append("g")
var tickEnter = tick
.enter()
.append("g")
.attr("class", "tick")
.attr("transform", bulletTranslate(x0))
.style("opacity", 1e-6);
tickEnter.append("line")
tickEnter
.append("line")
.attr("y1", height)
.attr("y2", height * 7 / 6);
.attr("y2", (height * 7) / 6);
tickEnter.append("text")
tickEnter
.append("text")
.attr("text-anchor", "middle")
.attr("dy", "1em")
.attr("y", height * 7 / 6)
.attr("y", (height * 7) / 6)
.text(format);
// Transition the entering ticks to the new scale, x1.
tickEnter.transition()
tickEnter
.transition()
.duration(duration)
.attr("transform", bulletTranslate(x1))
.style("opacity", 1);
// Transition the updating ticks to the new scale, x1.
var tickUpdate = tick.transition()
var tickUpdate = tick
.transition()
.duration(duration)
.attr("transform", bulletTranslate(x1))
.style("opacity", 1);
tickUpdate.select("line")
tickUpdate
.select("line")
.attr("y1", height)
.attr("y2", height + 7);
tickUpdate.select("text")
.attr("y", height + 7);
tickUpdate.select("text").attr("y", height + 7);
// Transition the exiting ticks to the new scale, x1.
tick.exit().transition()
tick
.exit()
.transition()
.duration(duration)
.attr("transform", bulletTranslate(x1))
.style("opacity", 1e-6)
@ -211,31 +244,30 @@ d3.bullet = function() {
};
return bullet;
};
};
function bulletRanges(d) {
function bulletRanges(d) {
return d.ranges;
}
}
function bulletMarkers(d) {
function bulletMarkers(d) {
return d.markers;
}
}
function bulletMeasures(d) {
function bulletMeasures(d) {
return d.measures;
}
}
function bulletTranslate(x) {
function bulletTranslate(x) {
return function(d) {
return "translate(" + x(d) + ",0)";
};
}
}
function bulletWidth(x) {
function bulletWidth(x) {
var x0 = x(0);
return function(d) {
return Math.abs(x(d) - x0);
};
}
}
})();

View File

@ -175,12 +175,15 @@ function d3_bullet_chart(
$output = '';
$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();
$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>
<style>
.bullet_graph {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
@ -204,13 +207,12 @@ function d3_bullet_chart(
.bullet g text { font-size:'.$font_size.'pt;}
</style>
<script src="'.$homeurl.'include/graphs/bullet.js"></script>
<script language="javascript" type="text/javascript">
var margin = {top: 5, right: 40, bottom: 20, left: 120};
width = ('.$width.'+10);
height = '.$height.'- margin.top - margin.bottom;
var width = ('.$width.'+10);
var height = '.$height.'- margin.top - margin.bottom;
var chart = d3.bullet()
.width(width)
@ -240,7 +242,6 @@ function d3_bullet_chart(
$output .= 'var data = ['.implode(',', $temp).'];
';
$output .= '
var svg = d3.select("#bullet_graph_'.$id_bullet.'").selectAll("svg")
.data(data)
.enter().append("svg")
@ -251,7 +252,6 @@ function d3_bullet_chart(
.attr("transform", "translate(" + (margin.left) + "," + margin.top + ")")
.call(chart);
var title = svg.append("g")
.style("text-anchor", "end")
.attr("transform", "translate(-10, 15)");
@ -266,17 +266,15 @@ function d3_bullet_chart(
.text(function(d) { return d.subtitle; });
$(".tick>text").each(function() {
label = $(this).text().replace(/,/g,"");
var label = $(this).text().replace(/,/g,"");
label = parseFloat(label);
text = label.toLocaleString();
var text = label.toLocaleString();
if ( label >= 1000000)
text = text.substring(0,3) + "M";
else if (label >= 100000)
text = text.substring(0,3) + "K";
else if (label >= 1000)
text = text.substring(0,2) + "K";
$(this).text(text);
});
</script>';

View File

@ -2248,8 +2248,6 @@ class Item extends CachedModel
);
}
$fields[0] = __('None');
$getAllVisualConsoleValue = $values['linkedLayoutId'];
if (\is_metaconsole() === true) {
$getAllVisualConsoleValue = $values['linkedLayoutId'];
@ -2268,6 +2266,8 @@ class Item extends CachedModel
'selected' => $getAllVisualConsoleValue,
'script' => 'linkedVisualConsoleChange()',
'return' => true,
'nothing' => __('None'),
'nothing_value' => 0,
],
];

View File

@ -426,8 +426,6 @@ final class ModuleGraph extends Item
[]
);
$data[0] = __('None');
return $data;
}
@ -578,6 +576,8 @@ final class ModuleGraph extends Item
'name' => 'customGraphId',
'selected' => $values['customGraphId'],
'return' => true,
'nothing' => __('None'),
'nothing_value' => 0,
],
];

View File

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

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

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

View File

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

View File

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