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

Added d3 items

This commit is contained in:
Arturo Gonzalez 2017-10-05 16:38:21 +02:00
parent 01df63b179
commit 7d455d3ac2
3 changed files with 229 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
pandora_console/include/functions_visual_map.php
View File

@ -1581,22 +1581,6 @@ function visual_map_print_item($mode = "read", $layoutData,
echo io_safe_output($text);
}
ob_start();
if ($type == CIRCULAR_PROGRESS_BAR) {
if($width == 0){
echo progress_circular_bar($percentile, 100,100, $border_color);
}
else{
echo progress_circular_bar($percentile, $width, $width, $border_color);
}
}
else {
echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
}
$img = ob_get_clean();
if(get_parameter('action') == 'edit'){
if($width == 0){
$img = '<img src="images/console/signes/circular-progress-bar.png" style="width:130px;height:130px;'.$imgpos.'">';
@ -1605,10 +1589,15 @@ function visual_map_print_item($mode = "read", $layoutData,
$img = '<img src="images/console/signes/circular-progress-bar.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';
}
}
else{
$img = str_replace('>', 'class="image" style="width:'.$wimg.'px;height:'.$himg.'px;'.$imgpos.'" id="image_' . $id . '" />', $img);
else {
if($width == 0){
$img = progress_circular_bar($id, $percentile, 100,100, $border_color);
}
else{
$img = progress_circular_bar($id, $percentile, $width, $width, $border_color);
}
}
echo $img;
if($layoutData['label_position']=='down'){
@ -1651,22 +1640,6 @@ function visual_map_print_item($mode = "read", $layoutData,
echo io_safe_output($text);
}
ob_start();
if ($type == CIRCULAR_INTERIOR_PROGRESS_BAR) {
if($width == 0){
echo progress_circular_bar_interior($percentile, 100,100, $border_color);
}
else{
echo progress_circular_bar_interior($percentile, $width, $width, $border_color);
}
}
else {
echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
}
$img = ob_get_clean();
if(get_parameter('action') == 'edit'){
if($width == 0){
$img = '<img src="images/console/signes/circular-progress-bar-interior.png" style="width:130px;height:130px;'.$imgpos.'">';
@ -1676,7 +1649,15 @@ function visual_map_print_item($mode = "read", $layoutData,
}
}
else{
$img = str_replace('>', 'class="image" style="width:'.$wimg.'px;height:'.$himg.'px;'.$imgpos.'" id="image_' . $id . '" />', $img);
if ($type == CIRCULAR_INTERIOR_PROGRESS_BAR) {
if($width == 0){
$img = progress_circular_bar_interior($id, $percentile, 100,100, $border_color);
}
else{
$img = progress_circular_bar_interior($id, $percentile, $width, $width, $border_color);
}
}
}
echo $img;

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

@ -310,11 +310,37 @@ function ux_console_phases_donut ($phases, $id, $return = false) {
return $output;
}
function progress_circular_bar ($percentile, $width, $height, $color) {
function progress_circular_bar ($id, $percentile, $width, $height, $color) {
global $config;
$recipient_name = "circular_progress_bar_" . $id;
$recipient_name_to_js = "#circular_progress_bar_" . $id;
$output = "";
$output .= "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
$output .= include_javascript_d3(true);
$output .= "<script language=\"javascript\" type=\"text/javascript\">
print_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "');
</script>";
return $output;
}
function progress_circular_bar_interior ($percentile, $width, $height, $color) {
function progress_circular_bar_interior ($id, $percentile, $width, $height, $color) {
global $config;
$recipient_name = "circular_progress_bar_interior_" . $id;
$recipient_name_to_js = "#circular_progress_bar_interior_" . $id;
$output = "";
$output .= "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
$output .= include_javascript_d3(true);
$output .= "<script language=\"javascript\" type=\"text/javascript\">
print_interior_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "');
</script>";
return $output;
}
?>

184
pandora_console/include/graphs/pandora.d3.js
View File

@ -1492,4 +1492,188 @@ function print_phases_donut (recipient, phases) {
polyline.exit()
.remove();
}
}
function print_circular_progress_bar (recipient, percentile, width, height, color) {
var twoPi = Math.PI * 2;
var radius = (width / 2) - 10;
var border = 20;
var startPercent = 0;
var endPercent = parseInt(percentile) / 100;
var count = Math.abs((endPercent - startPercent) / 0.01);
var step = endPercent < startPercent ? -0.01 : 0.01;
var formatPercent = d3.format('.2f');
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(radius)
.outerRadius(radius - border);
var circle = d3.select(recipient)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")");
var meter = circle.append("g")
.attr('class', 'progress-meter');
meter.append("path")
.attr('fill', '#000000')
.attr('fill-opacity', 0.5)
.attr('d', arc.endAngle(twoPi));
var foreground = circle.append("path")
.attr('fill', color)
.attr('fill-opacity', 1)
.attr('stroke', color)
.attr('stroke-opacity', 1);
var front = circle.append("path")
.attr('fill', color)
.attr('fill-opacity', 1);
var numberText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 20)
.text("YES")
.attr('text-anchor', 'middle')
.attr('dy', '-25');
var numberText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 32)
.attr('text-anchor', 'middle')
.attr('dy', '10');
var percentText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 16)
.text("%")
.attr('text-anchor', 'middle')
.attr('dy', '40');
function updateProgress(progress) {
foreground.attr('d', arc.endAngle(twoPi * progress));
front.attr('d', arc.endAngle(twoPi * progress));
numberText.text(formatPercent(progress * 100));
}
var progress = startPercent;
(function loops() {
updateProgress(progress);
if (count > 0) {
count--;
progress += step;
setTimeout(loops, 30);
}
})();
}
function print_interior_circular_progress_bar (recipient, percentile, width, height, color) {
var twoPi = Math.PI * 2;
var radius = (width / 2) - 30;
var radius2 = (width / 2) - 10;
var border = 20;
var startPercent = 0;
var endPercent = parseInt(percentile) / 100;
var count = Math.abs((endPercent - startPercent) / 0.01);
var step = endPercent < startPercent ? -0.01 : 0.01;
var formatPercent = d3.format('.2f');
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(radius)
.outerRadius(radius - border);
var arc2 = d3.svg.arc()
.startAngle(0)
.innerRadius(radius2)
.outerRadius(radius2 - border);
var circle = d3.select(recipient)
.append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")");
var meter = circle.append("g")
.attr('class', 'progress-meter');
meter.append("path")
.attr('fill', '#000000')
.attr('fill-opacity', 0.5)
.attr('d', arc.endAngle(twoPi));
var meter = circle.append("g")
.attr('class', 'progress-meter');
meter.append("path")
.attr('fill', color)
.attr('fill-opacity', 1)
.attr('d', arc2.endAngle(twoPi));
var foreground = circle.append("path")
.attr('fill', color)
.attr('fill-opacity', 1)
.attr('stroke', color)
.attr('stroke-opacity', 1);
var front = circle.append("path")
.attr('fill', color)
.attr('fill-opacity', 1);
var numberText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 20)
.text("YES")
.attr('text-anchor', 'middle')
.attr('dy', '-25');
var numberText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 32)
.attr('text-anchor', 'middle')
.attr('dy', '10');
var percentText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 16)
.text("%")
.attr('text-anchor', 'middle')
.attr('dy', '40');
function updateProgress(progress) {
foreground.attr('d', arc.endAngle(twoPi * progress));
front.attr('d', arc.endAngle(twoPi * progress));
numberText.text(formatPercent(progress * 100));
}
var progress = startPercent;
(function loops() {
updateProgress(progress);
if (count > 0) {
count--;
progress += step;
setTimeout(loops, 30);
}
})();
}