Fixed errors VC
This commit is contained in:
parent
d99d31b432
commit
0042f390ef
|
@ -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
|
||||
|
|
|
@ -1,10 +1,11 @@
|
|||
/* 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() {
|
||||
var orient = "right", // TODO top & bottom
|
||||
d3.bullet = function() {
|
||||
var orient = "right", // TODO top & bottom
|
||||
reverse = false,
|
||||
duration = 0,
|
||||
ranges = bulletRanges,
|
||||
|
@ -14,228 +15,259 @@ d3.bullet = function() {
|
|||
height = 30,
|
||||
tickFormat = null;
|
||||
|
||||
// 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),
|
||||
// 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),
|
||||
g = d3.select(this);
|
||||
|
||||
// Compute the new x-scale.
|
||||
var x1 = d3.scale.linear()
|
||||
// Compute the new x-scale.
|
||||
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()
|
||||
.domain([0, Infinity])
|
||||
.range(x1.range());
|
||||
// Retrieve the old x-scale, if this is an update.
|
||||
var x0 =
|
||||
this.__chart__ ||
|
||||
d3.scale
|
||||
.linear()
|
||||
.domain([0, Infinity])
|
||||
.range(x1.range());
|
||||
|
||||
// Stash the new scale.
|
||||
this.__chart__ = x1;
|
||||
// Stash the new scale.
|
||||
this.__chart__ = x1;
|
||||
|
||||
// Derive width-scales from the x-scales.
|
||||
var w0 = bulletWidth(x0),
|
||||
// Derive width-scales from the x-scales.
|
||||
var w0 = bulletWidth(x0),
|
||||
w1 = bulletWidth(x1);
|
||||
|
||||
// Update the range rects.
|
||||
var range = g.selectAll("rect.range")
|
||||
.data(rangez);
|
||||
// Update the range rects.
|
||||
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)
|
||||
.transition()
|
||||
.transition()
|
||||
.duration(duration)
|
||||
.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);
|
||||
// Update the measure rects.
|
||||
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)
|
||||
.attr("y", height / 3)
|
||||
.transition()
|
||||
.transition()
|
||||
.duration(duration)
|
||||
.attr("width", w1)
|
||||
.attr("x", reverse ? x1 : 0);
|
||||
|
||||
measure.transition()
|
||||
measure
|
||||
.transition()
|
||||
.duration(duration)
|
||||
.attr("width", w1)
|
||||
.attr("height", height / 3)
|
||||
.attr("x", reverse ? x1 : 0)
|
||||
.attr("y", height / 3);
|
||||
|
||||
// Update the marker lines.
|
||||
var marker = g.selectAll("line.marker")
|
||||
.data(markerz);
|
||||
// Update the marker lines.
|
||||
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)
|
||||
.transition()
|
||||
.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);
|
||||
// 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) {
|
||||
return this.textContent || format(d);
|
||||
});
|
||||
// Update the tick groups.
|
||||
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")
|
||||
// Initialize the ticks with the old scale, x0.
|
||||
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()
|
||||
// Transition the entering ticks to the new scale, x1.
|
||||
tickEnter
|
||||
.transition()
|
||||
.duration(duration)
|
||||
.attr("transform", bulletTranslate(x1))
|
||||
.style("opacity", 1);
|
||||
|
||||
// Transition the updating ticks to the new scale, x1.
|
||||
var tickUpdate = tick.transition()
|
||||
// Transition the updating ticks to the new scale, x1.
|
||||
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()
|
||||
// Transition the exiting ticks to the new scale, x1.
|
||||
tick
|
||||
.exit()
|
||||
.transition()
|
||||
.duration(duration)
|
||||
.attr("transform", bulletTranslate(x1))
|
||||
.style("opacity", 1e-6)
|
||||
.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
|
||||
bullet.orient = function(x) {
|
||||
if (!arguments.length) return orient;
|
||||
orient = x;
|
||||
reverse = orient == "right" || orient == "bottom";
|
||||
return bullet;
|
||||
};
|
||||
function bulletMarkers(d) {
|
||||
return d.markers;
|
||||
}
|
||||
|
||||
// ranges (bad, satisfactory, good)
|
||||
bullet.ranges = function(x) {
|
||||
if (!arguments.length) return ranges;
|
||||
ranges = x;
|
||||
return bullet;
|
||||
};
|
||||
function bulletMeasures(d) {
|
||||
return d.measures;
|
||||
}
|
||||
|
||||
// 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;
|
||||
}
|
||||
|
||||
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);
|
||||
};
|
||||
}
|
||||
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);
|
||||
};
|
||||
}
|
||||
})();
|
|
@ -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)");
|
||||
|
@ -261,22 +261,20 @@ function d3_bullet_chart(
|
|||
.text(function(d) { return d.title; });
|
||||
|
||||
title.append("text")
|
||||
.attr("class", "subtitle")
|
||||
.attr("dy", "1em")
|
||||
.text(function(d) { return d.subtitle; });
|
||||
.attr("class", "subtitle")
|
||||
.attr("dy", "1em")
|
||||
.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>';
|
||||
|
|
|
@ -2248,8 +2248,6 @@ class Item extends CachedModel
|
|||
);
|
||||
}
|
||||
|
||||
$fields[0] = __('None');
|
||||
|
||||
$getAllVisualConsoleValue = $values['linkedLayoutId'];
|
||||
if (\is_metaconsole() === true) {
|
||||
$getAllVisualConsoleValue = $values['linkedLayoutId'];
|
||||
|
@ -2262,12 +2260,14 @@ class Item extends CachedModel
|
|||
$inputs[] = [
|
||||
'label' => __('Linked visual console'),
|
||||
'arguments' => [
|
||||
'type' => 'select',
|
||||
'fields' => $fields,
|
||||
'name' => 'getAllVisualConsole',
|
||||
'selected' => $getAllVisualConsoleValue,
|
||||
'script' => 'linkedVisualConsoleChange()',
|
||||
'return' => true,
|
||||
'type' => 'select',
|
||||
'fields' => $fields,
|
||||
'name' => 'getAllVisualConsole',
|
||||
'selected' => $getAllVisualConsoleValue,
|
||||
'script' => 'linkedVisualConsoleChange()',
|
||||
'return' => true,
|
||||
'nothing' => __('None'),
|
||||
'nothing_value' => 0,
|
||||
],
|
||||
];
|
||||
|
||||
|
|
|
@ -426,8 +426,6 @@ final class ModuleGraph extends Item
|
|||
[]
|
||||
);
|
||||
|
||||
$data[0] = __('None');
|
||||
|
||||
return $data;
|
||||
}
|
||||
|
||||
|
@ -573,11 +571,13 @@ final class ModuleGraph extends Item
|
|||
'hidden' => $hiddenCustom,
|
||||
'label' => __('Custom graph'),
|
||||
'arguments' => [
|
||||
'type' => 'select',
|
||||
'fields' => $fields,
|
||||
'name' => 'customGraphId',
|
||||
'selected' => $values['customGraphId'],
|
||||
'return' => true,
|
||||
'type' => 'select',
|
||||
'fields' => $fields,
|
||||
'name' => 'customGraphId',
|
||||
'selected' => $values['customGraphId'],
|
||||
'return' => true,
|
||||
'nothing' => __('None'),
|
||||
'nothing_value' => 0,
|
||||
],
|
||||
];
|
||||
|
||||
|
|
|
@ -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
|
@ -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');
|
||||
}
|
||||
|
|
|
@ -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");
|
||||
}
|
||||
|
|
|
@ -531,3 +531,7 @@ div.module-graph {
|
|||
min-width: fit-content;
|
||||
min-height: fit-content;
|
||||
}
|
||||
|
||||
.textDecorationNone:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
|
Loading…
Reference in New Issue