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

Bubble item and percentile bar item are new. Fixed some visual errors

This commit is contained in:
Arturo Gonzalez 2017-10-06 14:04:20 +02:00
parent 3b03bfe6b5
commit 7410d66192
6 changed files with 406 additions and 208 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
pandora_console/godmode/reporting/visual_console_builder.editor.js
View File

@ -632,7 +632,9 @@ function readFields() {
values['height_module_graph'] = $("input[name=height_module_graph]").val();
values['event_max_time_row'] = $("select[name=event_max_time_row]").val();
values['type_percentile'] = $("select[name=type_percentile]").val();
values['percentile_color'] = $("input[name='percentile_color']").val();
values['percentile_color'] = $("input[name=percentile_color]").val();
values['percentile_label_color'] = $("input[name=percentile_label_color]").val();
values['percentile_label'] = $("input[name=percentile_label]").val();
values['value_show'] = $("select[name=value_show]").val();
values['enable_link'] = $("input[name=enable_link]").is(':checked') ? 1 : 0;
@ -1283,12 +1285,18 @@ function loadFieldsFromDB(item) {
$("input[name=height_module_graph]").val(val);
if (key == 'type_percentile')
$("select[name=type_percentile]").val(val);
if (key == 'percentile_label')
$("input[name=percentile_label]").val(val);
if (key == 'percentile_color') {
$("input[name='percentile_color']").val(val);
$("input[name=percentile_color]").val(val);
$("#percentile_item_row_5 .ColorPickerDivSample")
.css('background-color', val);
}
if (key == 'percentile_label_color') {
$("input[name=percentile_label_color]").val(val);
$("#percentile_item_row_6 .ColorPickerDivSample")
.css('background-color', val);
}
if (key == 'value_show') {
$("select[name=value_show]").val(val);

8
pandora_console/include/ajax/visual_console_builder.ajax.php
View File

@ -119,6 +119,8 @@ $border_width = (int)get_parameter('border_width', 0);
$border_color = get_parameter('border_color', '');
$fill_color = get_parameter('fill_color', '');
$percentile_color = get_parameter('percentile_color', '');
$percentile_label = get_parameter('percentile_label', '');
$percentile_label_color = get_parameter('percentile_label_color', '');
$width_box = (int)get_parameter('width_box', 0);
$height_box = (int)get_parameter('height_box', 0);
$line_start_x = (int)get_parameter('line_start_x', 0);
@ -620,6 +622,8 @@ switch ($action) {
$values['image'] = $value_show;
$values['border_color'] = $percentile_color;
$values['fill_color'] = $percentile_label_color;
$values['label'] = $percentile_label;
}
break;
case 'icon':
@ -797,6 +801,8 @@ switch ($action) {
$elementFields['type_percentile'] = 'interior_circular_progress_bar';
}
$elementFields['percentile_color'] = $elementFields['border_color'];
$elementFields['percentile_label_color'] = $elementFields['fill_color'];
$elementFields['percentile_label'] = $elementFields['label'];
break;
case 'module_graph':
@ -963,6 +969,8 @@ switch ($action) {
$values['image'] = $value_show; //Hack to save it show percent o value.
$values['width'] = $width_percentile;
$values['height'] = $max_percentile;
$values['fill_color'] = $percentile_label_color;
$values['label'] = $percentile_label;
break;
case 'static_graph':
$values['type'] = STATIC_GRAPH;

204
pandora_console/include/functions_visual_map.php
View File

@ -1417,45 +1417,17 @@ function visual_map_print_item($mode = "read", $layoutData,
break;
case PERCENTILE_BAR:
$imgpos = '';
if (($layoutData['image'] == 'value') && ($value_text !== false)) {
$unit_text = db_get_sql ('SELECT unit
FROM tagente_modulo
WHERE id_agente_modulo = ' . $id_module);
$unit_text = trim(io_safe_output($unit_text));
if($layoutData['label_position']=='left'){
$imgpos = 'float:right;';
}
else if($layoutData['label_position']=='right'){
$imgpos = 'float:left;';
}
$progress_bar_heigh = 15;
if (!empty($proportion)) {
if ($width != 0) {
$width = (integer)($proportion['proportion_width'] * $width);
}
else {
$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
}
if ($height != 0) {
$height = (integer)($proportion['proportion_height'] * $height);
$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
}
else {
$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
}
}
if($layoutData['label_position']=='up'){
echo io_safe_output($text);
}
ob_start();
if ($type == PERCENTILE_BUBBLE) {
echo progress_bubble($percentile, $width, $width, '', 1, $value_text, $colorStatus,$imgpos);
$percentile = $value_text;
}
else {
echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus,$imgpos);
$unit_text = "%";
}
$img = ob_get_clean();
if (get_parameter('action') == 'edit') {
if ($width == 0) {
@ -1466,67 +1438,25 @@ function visual_map_print_item($mode = "read", $layoutData,
}
}
else{
$img = str_replace('>', 'class="image" style="height:'.$himg.'px;width:'.$wimg.'px;'.$imgpos.'" id="image_' . $id . '" />', $img);
$img = d3_progress_bar($id, $percentile, $width, 50, $border_color, $unit_text, $label, $fill_color);
}
echo $img;
echo $img;
if($layoutData['label_position']=='down'){
echo io_safe_output($text);
}
else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
echo io_safe_output($text);
}
break;
case PERCENTILE_BUBBLE:
$imgpos = '';
if (($layoutData['image'] == 'value') && ($value_text !== false)) {
$unit_text = db_get_sql ('SELECT unit
FROM tagente_modulo
WHERE id_agente_modulo = ' . $id_module);
$unit_text = trim(io_safe_output($unit_text));
if($layoutData['label_position']=='left'){
$imgpos = 'float:right;';
}
else if($layoutData['label_position']=='right'){
$imgpos = 'float:left;';
}
$progress_bar_heigh = 15;
if (!empty($proportion)) {
if ($width != 0) {
$width = (integer)($proportion['proportion_width'] * $width);
}
else {
$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
}
if ($height != 0) {
$height = (integer)($proportion['proportion_height'] * $height);
$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
}
else {
$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
}
}
if($layoutData['label_position']=='up'){
echo io_safe_output($text);
}
ob_start();
if ($type == PERCENTILE_BUBBLE) {
if($width == 0){
echo progress_bubble($percentile, 100,100, '', 1, $value_text, $colorStatus,$s);
}
else{
echo progress_bubble($percentile, $width,$width, '', 1, $value_text, $colorStatus);
}
$percentile = $value_text;
}
else {
echo progress_bar($percentile, $width, $progress_bar_heigh, '', 1, $value_text, $colorStatus);
$unit_text = "%";
}
$img = ob_get_clean();
if(get_parameter('action') == 'edit'){
if($width == 0){
$img = '<img src="images/console/signes/percentil_bubble.png" style="width:130px;height:130px;'.$imgpos.'">';
@ -1536,51 +1466,18 @@ 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($width == 0){
$img = d3_progress_bubble($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
}
else{
$img = d3_progress_bubble($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_color);
}
}
echo $img;
if($layoutData['label_position']=='down'){
echo io_safe_output($text);
}
else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
echo io_safe_output($text);
}
break;
case CIRCULAR_PROGRESS_BAR:
$imgpos = '';
if($layoutData['label_position']=='left'){
$imgpos = 'float:right;';
}
else if($layoutData['label_position']=='right'){
$imgpos = 'float:left;';
}
$progress_bar_heigh = 15;
if (!empty($proportion)) {
if ($width != 0) {
$width = (integer)($proportion['proportion_width'] * $width);
}
else {
$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
}
if ($height != 0) {
$height = (integer)($proportion['proportion_height'] * $height);
$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
}
else {
$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
}
}
if($layoutData['label_position']=='up'){
echo io_safe_output($text);
}
if(get_parameter('action') == 'edit'){
if($width == 0){
$img = '<img src="images/console/signes/circular-progress-bar.png" style="width:130px;height:130px;'.$imgpos.'">';
@ -1602,56 +1499,18 @@ function visual_map_print_item($mode = "read", $layoutData,
$unit_text = "%";
}
if($width < 200){
$img = progress_circular_bar($id, $percentile, 200,200, $border_color, $unit_text);
if($width == 0){
$img = progress_circular_bar($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
}
else{
$img = progress_circular_bar($id, $percentile, $width, $width, $border_color, $unit_text);
$img = progress_circular_bar($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_color);
}
}
echo $img;
if($layoutData['label_position']=='down'){
echo io_safe_output($text);
}
else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
echo io_safe_output($text);
}
break;
case CIRCULAR_INTERIOR_PROGRESS_BAR:
$imgpos = '';
if($layoutData['label_position']=='left'){
$imgpos = 'float:right;';
}
else if($layoutData['label_position']=='right'){
$imgpos = 'float:left;';
}
$progress_bar_heigh = 15;
if (!empty($proportion)) {
if ($width != 0) {
$width = (integer)($proportion['proportion_width'] * $width);
}
else {
$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
}
if ($height != 0) {
$height = (integer)($proportion['proportion_height'] * $height);
$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
}
else {
$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
}
}
if($layoutData['label_position']=='up'){
echo io_safe_output($text);
}
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.'">';
@ -1673,24 +1532,17 @@ function visual_map_print_item($mode = "read", $layoutData,
$unit_text = "%";
}
if($width < 200){
$img = progress_circular_bar_interior($id, $percentile, 200,200, $border_color);
if($width == 0){
$img = progress_circular_bar_interior($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
}
else{
$img = progress_circular_bar_interior($id, $percentile, $width, $width, $border_color);
$img = progress_circular_bar_interior($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_color);
}
}
echo $img;
if($layoutData['label_position']=='down'){
echo io_safe_output($text);
}
else if($layoutData['label_position']=='left' || $layoutData['label_position']=='right'){
echo io_safe_output($text);
}
break;
case MODULE_GRAPH:
if ($layoutData['label_position']=='up') {

21
pandora_console/include/functions_visual_map_editor.php
View File

@ -157,8 +157,6 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$form_items['label_row'] = array();
$form_items['label_row']['items'] = array('label',
'static_graph',
'percentile_bar',
'percentile_item',
'module_graph',
'simple_value',
'datos',
@ -445,14 +443,28 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$form_items['percentile_item_row_5'] = array();
$form_items['percentile_item_row_5']['items'] = array('percentile_bar', 'percentile_item', 'datos');
$form_items['percentile_item_row_5']['html'] = '<td align="left">' . __('Color') . ui_print_help_tip (
__("Only for circular percentile items."), true) . '</td>
$form_items['percentile_item_row_5']['html'] = '<td align="left">' . __('Element color') . '</td>
<td align="left">' .
html_print_input_text_extended ('percentile_color', '#ffffff',
'text-percentile_color', '', 7, 7, false, '',
'class="percentile_color"', true) .
'</td>';
$form_items['percentile_item_row_6'] = array();
$form_items['percentile_item_row_6']['items'] = array('percentile_bar', 'percentile_item', 'datos');
$form_items['percentile_item_row_6']['html'] = '<td align="left">' . __('Label color') . '</td>
<td align="left">' .
html_print_input_text_extended ('percentile_label_color', '#ffffff',
'text-percentile_label_color', '', 7, 7, false, '',
'class="percentile_label_color"', true) .
'</td>';
$form_items['percentile_bar_row_7'] = array();
$form_items['percentile_bar_row_7']['items'] = array('percentile_bar', 'percentile_item', 'datos');
$form_items['percentile_bar_row_7']['html'] = '<td align="left">' .
__('Label') . '</td>
<td align="left">' . html_print_input_text('percentile_label', '', '', 30, 100, true) . '</td>';
$form_items['period_row'] = array();
$form_items['period_row']['items'] = array('module_graph', 'simple_value', 'datos');
$form_items['period_row']['html'] = '<td align="left">' . __('Period') . '</td>
@ -620,6 +632,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$(".fill_color").attachColorPicker();
$(".line_color").attachColorPicker();
$(".percentile_color").attachColorPicker();
$(".percentile_label_color").attachColorPicker();
$("input[name=radio_choice]").change(function(){
$('#count_items').html(1);

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

@ -310,7 +310,41 @@ function ux_console_phases_donut ($phases, $id, $return = false) {
return $output;
}
function progress_circular_bar ($id, $percentile, $width, $height, $color, $unit = "%") {
function d3_progress_bar ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
global $config;
$recipient_name = "progress_bar_" . $id;
$recipient_name_to_js = "#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\">
progress_bar_d3('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
</script>";
return $output;
}
function d3_progress_bubble ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
global $config;
$recipient_name = "progress_bubble_" . $id;
$recipient_name_to_js = "#progress_bubble_" . $id;
$output = "";
$output .= "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
$output .= include_javascript_d3(true);
$output .= "<script language=\"javascript\" type=\"text/javascript\">
progress_bubble_d3('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
</script>";
return $output;
}
function progress_circular_bar ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
global $config;
$recipient_name = "circular_progress_bar_" . $id;
@ -321,13 +355,13 @@ function progress_circular_bar ($id, $percentile, $width, $height, $color, $unit
$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 . "', '" . $unit . "');
print_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
</script>";
return $output;
}
function progress_circular_bar_interior ($id, $percentile, $width, $height, $color, $unit = "%") {
function progress_circular_bar_interior ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
global $config;
$recipient_name = "circular_progress_bar_interior_" . $id;
@ -338,9 +372,10 @@ function progress_circular_bar_interior ($id, $percentile, $width, $height, $col
$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 . "', '" . $unit . "');
print_interior_circular_progress_bar('" . $recipient_name_to_js . "', " . (int)$percentile . ", " . (int)$width . ", " . (int)$height . ", '" . $color . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
</script>";
return $output;
}
?>

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

@ -1494,9 +1494,195 @@ function print_phases_donut (recipient, phases) {
}
}
function print_circular_progress_bar (recipient, percentile, width, height, color, unit) {
function progress_bar_d3 (recipient, percentile, width, height, color, unit, label, label_color) {
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 circle = d3.select(recipient)
.append("svg")
.attr("width", width)
.attr("height", height);
var progress_back = circle.append('rect')
.attr('fill', '#000000')
.attr('fill-opacity', 0.5)
.attr('height', 20)
.attr('width', width)
.attr('rx', 10)
.attr('ry', 10)
.attr('x', 0);
var progress_front = circle.append('rect')
.attr('fill', color)
.attr('fill-opacity', 1)
.attr('height', 20)
.attr('width', 0)
.attr('rx', 10)
.attr('ry', 10)
.attr('x', 0);
var labelText = circle.append("text")
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
.attr('fill', label_color)
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 20)
.html(label)
.attr('dy', '15')
.attr('text-anchor', 'middle');
var numberText = circle.append("text")
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
.attr('fill', '#FFFFFF')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 14)
.attr('text-anchor', 'middle')
.attr('dy', '-10');
function updateProgress(bar_progress) {
numberText.text(formatPercent(bar_progress * 100) + " " + unit);
progress_front.attr('width', (width * bar_progress));
}
var bar_progress = startPercent;
(function loops() {
updateProgress(bar_progress);
if (count > 0) {
count--;
bar_progress += step;
setTimeout(loops, 30);
}
})();
}
function progress_bubble_d3 (recipient, percentile, width, height, color, unit, label, label_color) {
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 numberSize = 0;
var textSize = 0;
var unitSize = 0;
var yPosText = 0;
var yPosUnit = 0;
if (width >= 500) {
numberSize = 100;
textSize = 50;
unitSize = 50;
yPosText = '-100';
yPosUnit = '100';
}
else if (width >= 400) {
numberSize = 80;
textSize = 40;
unitSize = 40;
yPosText = '-80';
yPosUnit = '80';
}
else if (width >= 300) {
numberSize = 60;
textSize = 30;
unitSize = 30;
yPosText = '-60';
yPosUnit = '60';
}
else if (width >= 200) {
numberSize = 40;
textSize = 20;
unitSize = 20;
yPosText = '-40';
yPosUnit = '40';
}
else if (width >= 100) {
numberSize = 20;
textSize = 10;
unitSize = 10;
yPosText = '-20';
yPosUnit = '25';
}
else {
numberSize = 10;
textSize = 8;
unitSize = 8;
yPosText = '-10';
yPosUnit = '10';
}
var circle = d3.select(recipient)
.append("svg")
.attr("width", width)
.attr("height", height);
var progress_back = circle.append('circle')
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
.attr('fill', '#000000')
.attr('fill-opacity', 0.5)
.attr('r', width/2);
var progress_front = circle.append('circle')
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
.attr('fill', color)
.attr('fill-opacity', 1)
.attr('r', 0);
var labelText = circle.append("text")
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
.attr('fill', label_color)
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", textSize)
.html(label)
.attr('dy', yPosText)
.attr('text-anchor', 'middle');
var numberText = circle.append("text")
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
.attr('fill', '#FFFFFF')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", numberSize)
.attr('text-anchor', 'middle')
.attr('dy', '5');
var unitText = circle.append("text")
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")")
.attr('fill', '#FFFFFF')
.style("font-family", "arial")
.style("font-weight", "bold")
.text(unit)
.style("font-size", unitSize)
.attr('text-anchor', 'middle')
.attr('dy', yPosUnit);
function updateProgress(bar_progress) {
numberText.text(formatPercent(bar_progress * 100));
progress_front.attr('r', ((width/2) * bar_progress));
}
var bar_progress = startPercent;
(function loops() {
updateProgress(bar_progress);
if (count > 0) {
count--;
bar_progress += step;
setTimeout(loops, 30);
}
})();
}
function print_circular_progress_bar (recipient, percentile, width, height, color, unit, label, label_color) {
var twoPi = Math.PI * 2;
var radius = (width / 2) - 10;
var radius = (width / 2);
var border = 20;
var startPercent = 0;
var endPercent = parseInt(percentile) / 100;
@ -1504,6 +1690,54 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
var step = endPercent < startPercent ? -0.01 : 0.01;
var formatPercent = d3.format('.2f');
var numberSize = 0;
var textSize = 0;
var unitSize = 0;
var yPosText = 0;
var yPosUnit = 0;
if (width >= 500) {
numberSize = 100;
textSize = 50;
unitSize = 50;
yPosText = '-100';
yPosUnit = '100';
}
else if (width >= 400) {
numberSize = 80;
textSize = 40;
unitSize = 40;
yPosText = '-80';
yPosUnit = '80';
}
else if (width >= 300) {
numberSize = 60;
textSize = 30;
unitSize = 30;
yPosText = '-60';
yPosUnit = '60';
}
else if (width >= 200) {
numberSize = 40;
textSize = 20;
unitSize = 20;
yPosText = '-30';
yPosUnit = '40';
}
else if (width >= 100) {
numberSize = 20;
textSize = 10;
unitSize = 10;
yPosText = '-10';
yPosUnit = '25';
}
else {
numberSize = 2;
textSize = 1;
unitSize = 1;
yPosText = '-1';
yPosUnit = '2';
}
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(radius)
@ -1534,20 +1768,20 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
.attr('fill', color)
.attr('fill-opacity', 1);
var numberText = circle.append("text")
.attr('fill', '#000000')
var labelText = circle.append("text")
.attr('fill', label_color)
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 20)
.text("YES")
.style("font-size", textSize)
.html(label)
.attr('text-anchor', 'middle')
.attr('dy', '-25');
.attr('dy', yPosText);
var numberText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 32)
.style("font-size", numberSize)
.attr('text-anchor', 'middle')
.attr('dy', '10');
@ -1555,10 +1789,10 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 16)
.style("font-size", unitSize)
.text(unit)
.attr('text-anchor', 'middle')
.attr('dy', '40');
.attr('dy', yPosUnit);
function updateProgress(progress) {
foreground.attr('d', arc.endAngle(twoPi * progress));
@ -1579,10 +1813,10 @@ function print_circular_progress_bar (recipient, percentile, width, height, colo
})();
}
function print_interior_circular_progress_bar (recipient, percentile, width, height, color, unit) {
function print_interior_circular_progress_bar (recipient, percentile, width, height, color, unit, label, label_color) {
var twoPi = Math.PI * 2;
var radius = (width / 2) - 30;
var radius2 = (width / 2) - 10;
var radius = (width / 2) - 20;
var radius2 = (width / 2);
var border = 20;
var startPercent = 0;
var endPercent = parseInt(percentile) / 100;
@ -1590,6 +1824,54 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
var step = endPercent < startPercent ? -0.01 : 0.01;
var formatPercent = d3.format('.2f');
var numberSize = 0;
var textSize = 0;
var unitSize = 0;
var yPosText = 0;
var yPosUnit = 0;
if (width >= 500) {
numberSize = 100;
textSize = 50;
unitSize = 50;
yPosText = '-100';
yPosUnit = '100';
}
else if (width >= 400) {
numberSize = 80;
textSize = 40;
unitSize = 40;
yPosText = '-80';
yPosUnit = '80';
}
else if (width >= 300) {
numberSize = 60;
textSize = 30;
unitSize = 30;
yPosText = '-60';
yPosUnit = '60';
}
else if (width >= 200) {
numberSize = 40;
textSize = 20;
unitSize = 20;
yPosText = '-30';
yPosUnit = '40';
}
else if (width >= 100) {
numberSize = 20;
textSize = 10;
unitSize = 10;
yPosText = '-10';
yPosUnit = '25';
}
else {
numberSize = 2;
textSize = 1;
unitSize = 1;
yPosText = '-1';
yPosUnit = '2';
}
var arc = d3.svg.arc()
.startAngle(0)
.innerRadius(radius)
@ -1633,20 +1915,20 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
.attr('fill', color)
.attr('fill-opacity', 1);
var numberText = circle.append("text")
.attr('fill', '#000000')
var labelText = circle.append("text")
.attr('fill', label_color)
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 20)
.text("YES")
.style("font-size", textSize)
.html(label)
.attr('text-anchor', 'middle')
.attr('dy', '-25');
.attr('dy', yPosText);
var numberText = circle.append("text")
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 32)
.style("font-size", numberSize)
.attr('text-anchor', 'middle')
.attr('dy', '10');
@ -1654,10 +1936,10 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
.attr('fill', '#000000')
.style("font-family", "arial")
.style("font-weight", "bold")
.style("font-size", 16)
.style("font-size", unitSize)
.text(unit)
.attr('text-anchor', 'middle')
.attr('dy', '40');
.attr('dy', yPosUnit);
function updateProgress(progress) {
foreground.attr('d', arc.endAngle(twoPi * progress));