diff --git a/pandora_console/godmode/reporting/visual_console_builder.editor.js b/pandora_console/godmode/reporting/visual_console_builder.editor.js
index ba692f20f3..180b239a78 100755
--- a/pandora_console/godmode/reporting/visual_console_builder.editor.js
+++ b/pandora_console/godmode/reporting/visual_console_builder.editor.js
@@ -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);
diff --git a/pandora_console/include/ajax/visual_console_builder.ajax.php b/pandora_console/include/ajax/visual_console_builder.ajax.php
index 677e635e1e..a9034f3690 100755
--- a/pandora_console/include/ajax/visual_console_builder.ajax.php
+++ b/pandora_console/include/ajax/visual_console_builder.ajax.php
@@ -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;
diff --git a/pandora_console/include/functions_visual_map.php b/pandora_console/include/functions_visual_map.php
index 9479805b59..1de86c2543 100755
--- a/pandora_console/include/functions_visual_map.php
+++ b/pandora_console/include/functions_visual_map.php
@@ -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 = '
';
@@ -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 = '
';
@@ -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 = '
';
@@ -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') {
diff --git a/pandora_console/include/functions_visual_map_editor.php b/pandora_console/include/functions_visual_map_editor.php
index 49945a30f4..e2736dbf9b 100755
--- a/pandora_console/include/functions_visual_map_editor.php
+++ b/pandora_console/include/functions_visual_map_editor.php
@@ -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'] = '' . __('Color') . ui_print_help_tip (
- __("Only for circular percentile items."), true) . ' |
+ $form_items['percentile_item_row_5']['html'] = '' . __('Element color') . ' |
' .
html_print_input_text_extended ('percentile_color', '#ffffff',
'text-percentile_color', '', 7, 7, false, '',
'class="percentile_color"', true) .
' | ';
+ $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'] = '' . __('Label color') . ' |
+ ' .
+ html_print_input_text_extended ('percentile_label_color', '#ffffff',
+ 'text-percentile_label_color', '', 7, 7, false, '',
+ 'class="percentile_label_color"', true) .
+ ' | ';
+
+ $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'] = '' .
+ __('Label') . ' |
+ ' . html_print_input_text('percentile_label', '', '', 30, 100, true) . ' | ';
+
$form_items['period_row'] = array();
$form_items['period_row']['items'] = array('module_graph', 'simple_value', 'datos');
$form_items['period_row']['html'] = '' . __('Period') . ' |
@@ -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);
diff --git a/pandora_console/include/graphs/functions_d3.php b/pandora_console/include/graphs/functions_d3.php
index 9b839b7e02..4a682cc364 100644
--- a/pandora_console/include/graphs/functions_d3.php
+++ b/pandora_console/include/graphs/functions_d3.php
@@ -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 .= "";
+ $output .= include_javascript_d3(true);
+ $output .= "";
+
+ 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 .= "";
+ $output .= include_javascript_d3(true);
+ $output .= "";
+
+ 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 .= "";
$output .= include_javascript_d3(true);
$output .= "";
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 .= "";
$output .= include_javascript_d3(true);
$output .= "";
return $output;
}
+
?>
diff --git a/pandora_console/include/graphs/pandora.d3.js b/pandora_console/include/graphs/pandora.d3.js
index 9ce7c9c42d..4a177319d8 100644
--- a/pandora_console/include/graphs/pandora.d3.js
+++ b/pandora_console/include/graphs/pandora.d3.js
@@ -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));