Merge branch '1396-new-circular-percentile-item-in-visual-console-dev' into 'develop'
1396 new circular percentile item in visual console dev See merge request artica/pandorafms!904
This commit is contained in:
vgilc
commit
9dcef3043b
|
|
@ -201,7 +201,23 @@ echo "</form>";
|
|||
<script type="text/javascript">
|
||||
|
||||
$(document).ready (function () {
|
||||
|
||||
|
||||
var metaconsole = null;
|
||||
function is_metaconsole() {
|
||||
if (metaconsole === null)
|
||||
metaconsole = $("input[name='metaconsole']").val();
|
||||
|
||||
if (metaconsole != 0)
|
||||
return true;
|
||||
else
|
||||
return false;
|
||||
}
|
||||
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
$("#modsize").click(function(event){
|
||||
event.preventDefault();
|
||||
|
||||
|
|
@ -260,7 +276,7 @@ $(document).ready (function () {
|
|||
}
|
||||
else{
|
||||
original_image=new Image();
|
||||
original_image.src='images/console/background/'+$('#background').val();
|
||||
original_image.src= url_hack_metaconsole + 'images/console/background/'+$('#background').val();
|
||||
if (parseInt(original_image.width) < 1024){
|
||||
alert('Default width is '+original_image.width+'px, smaller than minimum -> 1024px');
|
||||
$('input[name=width]').val('1024');
|
||||
|
|
@ -310,7 +326,7 @@ $(document).ready (function () {
|
|||
var size_changer_state = false;
|
||||
|
||||
$("#background").change(function() {
|
||||
$('#imagen2').attr('src','images/console/background/'+$('#background').val());
|
||||
$('#imagen2').attr('src', url_hack_metaconsole + 'images/console/background/'+$('#background').val());
|
||||
$('#imagen2').width(230);
|
||||
$('#imagen2').show();
|
||||
});
|
||||
|
|
@ -323,7 +339,7 @@ $(document).ready (function () {
|
|||
|
||||
$("#background").mouseout(function() {
|
||||
if(size_changer_state){
|
||||
$('#imagen').attr('src','images/console/background/'+$('#background').val());
|
||||
$('#imagen').attr('src',url_hack_metaconsole + 'images/console/background/'+$('#background').val());
|
||||
$('input[name=width]').val($('#imagen').width());
|
||||
$('input[name=height]').val($('#imagen').height());
|
||||
$('#preimagew').html($('#imagen').width());
|
||||
|
|
|
|||
|
|
@ -379,6 +379,12 @@ function update_button_palette_callback() {
|
|||
if (values['type_percentile'] == 'bubble') {
|
||||
setPercentileBubble(idItem, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'circular_progress_bar') {
|
||||
setPercentileCircular(idItem, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'interior_circular_progress_bar') {
|
||||
setPercentileInteriorCircular(idItem, values);
|
||||
}
|
||||
else {
|
||||
setPercentileBar(idItem, values);
|
||||
}
|
||||
|
|
@ -420,17 +426,6 @@ function update_button_palette_callback() {
|
|||
$("#image_" + idItem).attr("src", "images/spinner.gif");
|
||||
setModuleGraph(idItem);
|
||||
break;
|
||||
case 'bars_graph':
|
||||
if($('input[name=width_percentile]').val() == ''){
|
||||
alert('Undefined width');
|
||||
return false;
|
||||
}
|
||||
|
||||
$("#text_" + idItem).html(values['label']);
|
||||
$("#image_" + idItem).attr("src", "images/spinner.gif");
|
||||
|
||||
setBarsGraph(idItem, values);
|
||||
break;
|
||||
case 'auto_sla_graph':
|
||||
if($('input[name=width]').val() == ''){
|
||||
alert('Undefined width');
|
||||
|
|
@ -445,12 +440,14 @@ function update_button_palette_callback() {
|
|||
|
||||
setEventsBar(idItem, values);
|
||||
break;
|
||||
case 'donut_graph':
|
||||
$("#image_" + idItem).attr("src", "images/spinner.gif");
|
||||
|
||||
setDonutsGraph(idItem, values);
|
||||
break;
|
||||
case 'simple_value':
|
||||
//checkpoint
|
||||
// if(($('#text-label_ifr').contents().find('#tinymce p').html() == '_VALUE_' ||
|
||||
// $('#text-label_ifr').contents().find('#tinymce').html() == '_VALUE_')
|
||||
// && $('#data_image_check').html() != 'On'){
|
||||
// alert('_VALUE_ exactly value is only enable for data image. Please change label text or select a data image module.');
|
||||
// return;
|
||||
// }
|
||||
$("#" + idItem).html(values['label']);
|
||||
if( (values['label'].replace( /<.*?>/g, '' ) != '_VALUE_')
|
||||
&& (values['label'].replace( /<.*?>/g, '' ) != '(_VALUE_)') ){
|
||||
|
|
@ -465,7 +462,12 @@ function update_button_palette_callback() {
|
|||
$("#" + idItem).html(
|
||||
'<table><tbody><tr><td></td></tr><tr><td><span style="" id="text_21" class="text">'+values["label"]+'</span></td></tr><tr><td></td></tr></tbody></table>'
|
||||
)
|
||||
|
||||
}
|
||||
|
||||
|
||||
//$("#simplevalue_" + idItem)
|
||||
//.html($('<img></img>').attr('src', "images/spinner.gif"));
|
||||
setModuleValue(idItem,values['process_simple_value'], values['period'],values['width']);
|
||||
break;
|
||||
case 'label':
|
||||
|
|
@ -620,7 +622,6 @@ function readFields() {
|
|||
}
|
||||
}
|
||||
values['height'] = $("input[name=height]").val();
|
||||
values['bars_graph_type'] = $("select[name=bars_graph_type]").val();
|
||||
values['parent'] = $("select[name=parent]").val();
|
||||
values['map_linked'] = $("select[name=map_linked]").val();
|
||||
values['width_percentile'] = $("input[name=width_percentile]").val();
|
||||
|
|
@ -628,8 +629,12 @@ function readFields() {
|
|||
values['width_module_graph'] = $("input[name=width_module_graph]").val();
|
||||
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'] = $("input[name=type_percentile]:checked").val();
|
||||
values['value_show'] = $("input[name=value_show]:checked").val();
|
||||
values['type_percentile'] = $("select[name=type_percentile]").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;
|
||||
values['id_group'] = $("select[name=group]").val();
|
||||
values['id_custom_graph'] = parseInt(
|
||||
|
|
@ -669,7 +674,7 @@ function readFields() {
|
|||
|
||||
function create_button_palette_callback() {
|
||||
var values = readFields();
|
||||
console.log(values);
|
||||
|
||||
//VALIDATE DATA
|
||||
var validate = true;
|
||||
switch (creationItem) {
|
||||
|
|
@ -704,12 +709,6 @@ console.log(values);
|
|||
validate = false;
|
||||
}
|
||||
break;
|
||||
case 'donut_graph':
|
||||
if ((values['agent'] == '')) {
|
||||
alert($("#message_alert_no_agent").html());
|
||||
validate = false;
|
||||
}
|
||||
break;
|
||||
case 'label':
|
||||
if ((values['label'] == '')) {
|
||||
alert($("#message_alert_no_label").html());
|
||||
|
|
@ -777,16 +776,6 @@ console.log(values);
|
|||
}
|
||||
}
|
||||
break;
|
||||
case 'bars_graph':
|
||||
if ((values['agent'] == '')) {
|
||||
alert($("#message_alert_no_agent").html());
|
||||
validate = false;
|
||||
}
|
||||
if ((values['module'] == 0)) {
|
||||
alert($("#message_alert_no_module").html());
|
||||
validate = false;
|
||||
}
|
||||
break;
|
||||
case 'simple_value':
|
||||
if ((values['agent'] == '')) {
|
||||
alert($("#message_alert_no_agent").html());
|
||||
|
|
@ -988,7 +977,6 @@ function toggle_item_palette() {
|
|||
|
||||
activeToolboxButton('static_graph', true);
|
||||
activeToolboxButton('module_graph', true);
|
||||
activeToolboxButton('bars_graph', true);
|
||||
activeToolboxButton('simple_value', true);
|
||||
activeToolboxButton('label', true);
|
||||
activeToolboxButton('icon', true);
|
||||
|
|
@ -997,7 +985,6 @@ function toggle_item_palette() {
|
|||
activeToolboxButton('box_item', true);
|
||||
activeToolboxButton('line_item', true);
|
||||
activeToolboxButton('auto_sla_graph', true);
|
||||
activeToolboxButton('donut_graph', true);
|
||||
|
||||
if (typeof(enterprise_activeToolboxButton) == 'function') {
|
||||
enterprise_activeToolboxButton(true);
|
||||
|
|
@ -1017,9 +1004,7 @@ function toggle_item_palette() {
|
|||
|
||||
activeToolboxButton('static_graph', false);
|
||||
activeToolboxButton('module_graph', false);
|
||||
activeToolboxButton('bars_graph', false);
|
||||
activeToolboxButton('auto_sla_graph', false);
|
||||
activeToolboxButton('donut_graph', false);
|
||||
activeToolboxButton('simple_value', false);
|
||||
activeToolboxButton('label', false);
|
||||
activeToolboxButton('icon', false);
|
||||
|
|
@ -1292,18 +1277,19 @@ function loadFieldsFromDB(item) {
|
|||
$("input[name=width_module_graph]").val(val);
|
||||
if (key == 'height_module_graph')
|
||||
$("input[name=height_module_graph]").val(val);
|
||||
if (key == 'bars_graph_type')
|
||||
$("select[name=bars_graph_type]").val(val);
|
||||
|
||||
if (key == 'type_percentile') {
|
||||
if (val == 'percentile') {
|
||||
$("input[name=type_percentile][value=percentile]")
|
||||
.attr("checked", "checked");
|
||||
}
|
||||
else {
|
||||
$("input[name=type_percentile][value=bubble]")
|
||||
.attr("checked", "checked");
|
||||
}
|
||||
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);
|
||||
$("#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') {
|
||||
|
|
@ -1554,9 +1540,6 @@ function hiddenFields(item) {
|
|||
$("#module_graph_size_row").css('display', 'none');
|
||||
$("#module_graph_size_row." + item).css('display', '');
|
||||
|
||||
$("#bars_graph_type").css('display', 'none');
|
||||
$("#bars_graph_type." + item).css('display', '');
|
||||
|
||||
$("#background_color").css('display', 'none');
|
||||
$("#background_color." + item).css('display', '');
|
||||
|
||||
|
|
@ -1773,60 +1756,6 @@ function set_image(type, idElement, image) {
|
|||
});
|
||||
}
|
||||
|
||||
function setBarsGraph(id_data, values) {
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
width_percentile = values['width_percentile'];
|
||||
|
||||
parameter = Array();
|
||||
|
||||
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
|
||||
parameter.push ({name: "action", value: "get_module_type_string"});
|
||||
parameter.push ({name: "id_agent", value: values['id_agent']});
|
||||
parameter.push ({name: "module", value: values['module']});
|
||||
parameter.push ({name: "id_element", value: id_data});
|
||||
parameter.push ({name: "id_visual_console", value: id_visual_console});
|
||||
jQuery.ajax({
|
||||
url: get_url_ajax(),
|
||||
data: parameter,
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (data['no_data'] == true) {
|
||||
if (values['width_percentile'] == "0") {
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras-no.png');
|
||||
}
|
||||
else {
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras-no.png');
|
||||
$("#" + id_data + " img").css('width', width_percentile + 'px');
|
||||
$("#" + id_data + " img").css('height', width_percentile + 'px');
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/barras.png');
|
||||
|
||||
if (values['width_percentile'] == "0") {
|
||||
// Image size
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', width_percentile+'px');
|
||||
$("#" + id_data + " img").css('height', width_percentile+'px');
|
||||
}
|
||||
}
|
||||
|
||||
if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
|
||||
$('#'+id_data+ ' img').css('margin-top', parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);
|
||||
}
|
||||
else{
|
||||
$('#'+id_data+ ' img').css('margin-left', parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setModuleGraph(id_data) {
|
||||
var parameter = Array();
|
||||
|
||||
|
|
@ -2002,7 +1931,7 @@ function setPercentileBar(id_data, values) {
|
|||
|
||||
$("#"+ id_data).attr('src', img);
|
||||
|
||||
$("#" + id_data + " img").attr('src', 'images/console/signes/percentil.png');
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/percentil.png');
|
||||
if($('#text-width_percentile').val() == 0){
|
||||
$("#" + id_data + " img").css('width', '130px');
|
||||
}
|
||||
|
|
@ -2025,6 +1954,142 @@ function setPercentileBar(id_data, values) {
|
|||
});
|
||||
}
|
||||
|
||||
function setPercentileCircular (id_data, values) {
|
||||
metaconsole = $("input[name='metaconsole']").val();
|
||||
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
max_percentile = values['max_percentile'];
|
||||
width_percentile = values['width_percentile'];
|
||||
|
||||
var parameter = Array();
|
||||
|
||||
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
|
||||
parameter.push ({name: "action", value: "get_module_value"});
|
||||
parameter.push ({name: "id_element", value: id_data});
|
||||
parameter.push ({name: "value_show", value: values['value_show']});
|
||||
parameter.push ({name: "id_visual_console",
|
||||
value: id_visual_console});
|
||||
jQuery.ajax({
|
||||
url: get_url_ajax(),
|
||||
data: parameter,
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
module_value = data['value'];
|
||||
max_percentile = data['max_percentile'];
|
||||
width_percentile = data['width_percentile'];
|
||||
unit_text = false;
|
||||
|
||||
if ((data['unit_text'] != false) || typeof(data['unit_text']) != 'boolean') {
|
||||
unit_text = data['unit_text'];
|
||||
}
|
||||
|
||||
colorRGB = data['colorRGB'];
|
||||
|
||||
if ( max_percentile > 0)
|
||||
var percentile = Math.round(module_value / max_percentile * 100);
|
||||
else
|
||||
var percentile = 100;
|
||||
|
||||
if (unit_text == false && typeof(unit_text) == 'boolean') {
|
||||
value_text = percentile + "%";
|
||||
}
|
||||
else {
|
||||
value_text = module_value + " " + unit_text;
|
||||
}
|
||||
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/circular-progress-bar.png');
|
||||
if($('#text-width_percentile').val() == 0){
|
||||
$("#" + id_data + " img").css('width', '130px');
|
||||
$("#" + id_data + " img").css('height', '130px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
|
||||
$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
|
||||
}
|
||||
|
||||
if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
|
||||
$('#'+id_data+ ' img').css('margin-top', parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);
|
||||
}
|
||||
else{
|
||||
$('#'+id_data+ ' img').css('margin-left',parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setPercentileInteriorCircular (id_data, values) {
|
||||
metaconsole = $("input[name='metaconsole']").val();
|
||||
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
max_percentile = values['max_percentile'];
|
||||
width_percentile = values['width_percentile'];
|
||||
|
||||
var parameter = Array();
|
||||
|
||||
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
|
||||
parameter.push ({name: "action", value: "get_module_value"});
|
||||
parameter.push ({name: "id_element", value: id_data});
|
||||
parameter.push ({name: "value_show", value: values['value_show']});
|
||||
parameter.push ({name: "id_visual_console",
|
||||
value: id_visual_console});
|
||||
jQuery.ajax({
|
||||
url: get_url_ajax(),
|
||||
data: parameter,
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
module_value = data['value'];
|
||||
max_percentile = data['max_percentile'];
|
||||
width_percentile = data['width_percentile'];
|
||||
unit_text = false;
|
||||
|
||||
if ((data['unit_text'] != false) || typeof(data['unit_text']) != 'boolean') {
|
||||
unit_text = data['unit_text'];
|
||||
}
|
||||
|
||||
colorRGB = data['colorRGB'];
|
||||
|
||||
if ( max_percentile > 0)
|
||||
var percentile = Math.round(module_value / max_percentile * 100);
|
||||
else
|
||||
var percentile = 100;
|
||||
|
||||
if (unit_text == false && typeof(unit_text) == 'boolean') {
|
||||
value_text = percentile + "%";
|
||||
}
|
||||
else {
|
||||
value_text = module_value + " " + unit_text;
|
||||
}
|
||||
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/circular-progress-bar-interior.png');
|
||||
if($('#text-width_percentile').val() == 0){
|
||||
$("#" + id_data + " img").css('width', '130px');
|
||||
$("#" + id_data + " img").css('height', '130px');
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
|
||||
$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
|
||||
}
|
||||
|
||||
if($('#'+id_data+' table').css('float') == 'right' || $('#'+id_data+ ' table').css('float') == 'left'){
|
||||
$('#'+id_data+ ' img').css('margin-top', parseInt($('#'+id_data).css('height'))/2 - parseInt($('#'+id_data+ ' img').css('height'))/2);
|
||||
}
|
||||
else{
|
||||
$('#'+id_data+ ' img').css('margin-left',parseInt($('#'+id_data).css('width'))/2 - parseInt($('#'+id_data+ ' img').css('width'))/2);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setEventsBar(id_data, values) {
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
|
|
@ -2076,53 +2141,6 @@ function setEventsBar(id_data, values) {
|
|||
});
|
||||
}
|
||||
|
||||
function setDonutsGraph (id_data, values) {
|
||||
var url_hack_metaconsole = '';
|
||||
if (is_metaconsole()) {
|
||||
url_hack_metaconsole = '../../';
|
||||
}
|
||||
|
||||
width_percentile = values['width_percentile'];
|
||||
|
||||
parameter = Array();
|
||||
|
||||
parameter.push ({name: "page", value: "include/ajax/visual_console_builder.ajax"});
|
||||
parameter.push ({name: "action", value: "get_module_type_string"});
|
||||
parameter.push ({name: "id_agent", value: values['id_agent']});
|
||||
parameter.push ({name: "id_agent_module", value: values['module']});
|
||||
parameter.push ({name: "id_element", value: id_data});
|
||||
parameter.push ({name: "id_visual_console", value: id_visual_console});
|
||||
jQuery.ajax({
|
||||
url: get_url_ajax(),
|
||||
data: parameter,
|
||||
type: "POST",
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (data['no_data'] == true) {
|
||||
if (values['width'] == "0") {
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/wrong_donut_graph.png');
|
||||
}
|
||||
else {
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/wrong_donut_graph.png');
|
||||
$("#" + id_data + " img").css('width', width_percentile + 'px');
|
||||
$("#" + id_data + " img").css('height', width_percentile + 'px');
|
||||
}
|
||||
}
|
||||
else {
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/donut-graph.png');
|
||||
|
||||
if($('#text-width').val() == 0 || $('#text-height').val() == 0){
|
||||
// Image size
|
||||
}
|
||||
else{
|
||||
$("#" + id_data + " img").css('width', $('#text-width_percentile').val()+'px');
|
||||
$("#" + id_data + " img").css('height', $('#text-width_percentile').val()+'px');
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function setPercentileBubble(id_data, values) {
|
||||
metaconsole = $("input[name='metaconsole']").val();
|
||||
|
||||
|
|
@ -2174,7 +2192,7 @@ function setPercentileBubble(id_data, values) {
|
|||
|
||||
$("#image_" + id_data).attr('src', img);
|
||||
|
||||
$("#" + id_data + " img").attr('src', 'images/console/signes/percentil_bubble.png');
|
||||
$("#" + id_data + " img").attr('src', url_hack_metaconsole + 'images/console/signes/percentil_bubble.png');
|
||||
|
||||
|
||||
if($('#text-width_percentile').val() == 0){
|
||||
|
|
@ -2364,23 +2382,34 @@ function createItem(type, values, id_data) {
|
|||
}
|
||||
|
||||
if(values['show_statistics'] != 1){
|
||||
if ((values['width'] == 0) || (values['height'] == 0)) {
|
||||
// Do none
|
||||
if($('#preview > img')[0].naturalWidth > 150 || $('#preview > img')[0].naturalHeight > 150){
|
||||
$image.attr('width', '70')
|
||||
.attr('height', '70');
|
||||
|
||||
if ((values['width'] == 0) || (values['height'] == 0)) {
|
||||
// Do none
|
||||
if($('#preview > img')[0].naturalWidth > 150 || $('#preview > img')[0].naturalHeight > 150){
|
||||
$image.attr('width', '70')
|
||||
.attr('height', '70');
|
||||
}
|
||||
else{
|
||||
$image.attr('width', $('#preview > img')[0].naturalWidth)
|
||||
.attr('height', $('#preview > img')[0].naturalHeight);
|
||||
}
|
||||
}
|
||||
else {
|
||||
$image.attr('width', values['width'])
|
||||
.attr('height', values['height']);
|
||||
}
|
||||
else{
|
||||
$image.attr('width', $('#preview > img')[0].naturalWidth)
|
||||
.attr('height', $('#preview > img')[0].naturalHeight);
|
||||
}
|
||||
}
|
||||
else {
|
||||
$image.attr('width', values['width'])
|
||||
.attr('height', values['height']);
|
||||
}
|
||||
}
|
||||
|
||||
// else{
|
||||
// $('#image_'+id_data).css('width', values['width']+'px');
|
||||
// $('#image_'+id_data).css('height', values['height']+'px');
|
||||
// }
|
||||
/*
|
||||
var $span = $('<span></span>')
|
||||
.attr('id', 'text_' + id_data)
|
||||
.attr('class', 'text')
|
||||
.append(values['label']);
|
||||
|
||||
*/
|
||||
var $input = $('<input></input>')
|
||||
.attr('id', 'hidden-status_' + id_data)
|
||||
.attr('type', 'hidden')
|
||||
|
|
@ -2470,16 +2499,6 @@ function createItem(type, values, id_data) {
|
|||
|
||||
setEventsBar(id_data, values);
|
||||
break;
|
||||
case 'donut_graph':
|
||||
var sizeStyle = '';
|
||||
var imageSize = '';
|
||||
item = $('<div id="' + id_data + '" class="item donut_graph" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
setDonutsGraph(id_data, values);
|
||||
break;
|
||||
case 'percentile_bar':
|
||||
case 'percentile_item':
|
||||
var sizeStyle = '';
|
||||
|
|
@ -2521,9 +2540,77 @@ function createItem(type, values, id_data) {
|
|||
|
||||
setPercentileBar(id_data, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'circular_progress_bar') {
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'down'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'right'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:left;" />' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'left'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:right;"/>' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
setPercentileCircular(id_data, values);
|
||||
}
|
||||
else if (values['type_percentile'] == 'interior_circular_progress_bar') {
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'down'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'right'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:left;" />' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
else if(values['label_position'] == 'left'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" style="float:right;"/>' +
|
||||
'<table style="float:left;height:'+values['height']+'px"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
|
||||
}
|
||||
|
||||
setPercentileInteriorCircular(id_data, values);
|
||||
}
|
||||
else {
|
||||
|
||||
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item percentile_item" style="text-align: left; position: absolute; display: inline-block; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
|
|
@ -2591,42 +2678,6 @@ function createItem(type, values, id_data) {
|
|||
|
||||
setModuleGraph(id_data);
|
||||
break;
|
||||
case 'bars_graph':
|
||||
sizeStyle = '';
|
||||
imageSize = '';
|
||||
|
||||
if(values['label_position'] == 'up'){
|
||||
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'down'){
|
||||
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'left'){
|
||||
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img style="float:right" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table style="float:left;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
else if(values['label_position'] == 'right'){
|
||||
item = $('<div id="' + id_data + '" class="item module_graph" style="text-align: left; position: absolute; ' + sizeStyle + ' top: ' + values['top'] + 'px; left: ' + values['left'] + 'px;">' +
|
||||
'<img style="float:left" class="image" id="image_' + id_data + '" src="images/spinner.gif" />' +
|
||||
'<table style="float:right;height:'+values['height_module_graph']+'px;"><tr><td></td></tr><tr><td><span id="text_' + id_data + '" class="text">' + values['label'] + '</span></td></tr><tr><td></td></tr></table>' +
|
||||
'</div>'
|
||||
);
|
||||
}
|
||||
|
||||
|
||||
setBarsGraph(id_data, values);
|
||||
break;
|
||||
case 'simple_value':
|
||||
sizeStyle = '';
|
||||
imageSize = '';
|
||||
|
|
@ -2846,9 +2897,7 @@ function updateDB_visual(type, idElement , values, event, top, left) {
|
|||
case 'label':
|
||||
case 'icon':
|
||||
case 'module_graph':
|
||||
case 'bars_graph':
|
||||
case 'auto_sla_graph':
|
||||
case 'donut_graph':
|
||||
if (type == 'simple_value') {
|
||||
setModuleValue(idElement,
|
||||
values.process_simple_value,
|
||||
|
|
@ -3260,15 +3309,6 @@ function eventsItems(drag) {
|
|||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('donut_graph')) {
|
||||
creationItem = null;
|
||||
selectedItem = 'donut_graph';
|
||||
idItem = $(divParent).attr('id');
|
||||
activeToolboxButton('copy_item', true);
|
||||
activeToolboxButton('edit_item', true);
|
||||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('group_item')) {
|
||||
creationItem = null;
|
||||
selectedItem = 'group_item';
|
||||
|
|
@ -3296,15 +3336,6 @@ function eventsItems(drag) {
|
|||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('bars_graph')) {
|
||||
creationItem = null;
|
||||
selectedItem = 'bars_graph';
|
||||
idItem = $(divParent).attr('id');
|
||||
activeToolboxButton('copy_item', true);
|
||||
activeToolboxButton('edit_item', true);
|
||||
activeToolboxButton('delete_item', true);
|
||||
activeToolboxButton('show_grid', false);
|
||||
}
|
||||
if ($(divParent).hasClass('simple_value')) {
|
||||
creationItem = null;
|
||||
selectedItem = 'simple_value';
|
||||
|
|
@ -3478,9 +3509,6 @@ function eventsItems(drag) {
|
|||
if ($(event.target).hasClass('auto_sla_graph')) {
|
||||
selectedItem = 'auto_sla_graph';
|
||||
}
|
||||
if ($(event.target).hasClass('donut_graph')) {
|
||||
selectedItem = 'donut_graph';
|
||||
}
|
||||
if ($(event.target).hasClass('group_item')) {
|
||||
selectedItem = 'group_item';
|
||||
}
|
||||
|
|
@ -3490,9 +3518,6 @@ function eventsItems(drag) {
|
|||
if ($(event.target).hasClass('module_graph')) {
|
||||
selectedItem = 'module_graph';
|
||||
}
|
||||
if ($(event.target).hasClass('bars_graph')) {
|
||||
selectedItem = 'bars_graph';
|
||||
}
|
||||
if ($(event.target).hasClass('simple_value')) {
|
||||
selectedItem = 'simple_value';
|
||||
}
|
||||
|
|
@ -3796,18 +3821,10 @@ function click_button_toolbox(id) {
|
|||
toolbuttonActive = creationItem = 'module_graph';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'bars_graph':
|
||||
toolbuttonActive = creationItem = 'bars_graph';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'auto_sla_graph':
|
||||
toolbuttonActive = creationItem = 'auto_sla_graph';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'donut_graph':
|
||||
toolbuttonActive = creationItem = 'donut_graph';
|
||||
toggle_item_palette();
|
||||
break;
|
||||
case 'simple_value':
|
||||
toolbuttonActive = creationItem = 'simple_value';
|
||||
toggle_item_palette();
|
||||
|
|
@ -3859,14 +3876,12 @@ function click_button_toolbox(id) {
|
|||
activeToolboxButton('static_graph', false);
|
||||
activeToolboxButton('percentile_item', false);
|
||||
activeToolboxButton('module_graph', false);
|
||||
activeToolboxButton('bars_graph', false);
|
||||
activeToolboxButton('simple_value', false);
|
||||
activeToolboxButton('label', false);
|
||||
activeToolboxButton('icon', false);
|
||||
activeToolboxButton('service', false);
|
||||
activeToolboxButton('group_item', false);
|
||||
activeToolboxButton('auto_sla_graph', false);
|
||||
activeToolboxButton('donut_graph', false);
|
||||
activeToolboxButton('copy_item', false);
|
||||
activeToolboxButton('edit_item', false);
|
||||
activeToolboxButton('delete_item', false);
|
||||
|
|
@ -3892,13 +3907,11 @@ function click_button_toolbox(id) {
|
|||
activeToolboxButton('static_graph', true);
|
||||
activeToolboxButton('percentile_item', true);
|
||||
activeToolboxButton('module_graph', true);
|
||||
activeToolboxButton('bars_graph', true);
|
||||
activeToolboxButton('simple_value', true);
|
||||
activeToolboxButton('label', true);
|
||||
activeToolboxButton('icon', true);
|
||||
activeToolboxButton('group_item', true);
|
||||
activeToolboxButton('auto_sla_graph', true);
|
||||
activeToolboxButton('donut_graph', true);
|
||||
}
|
||||
break;
|
||||
case 'save_visualmap':
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
|
|
@ -118,6 +118,9 @@ $id_custom_graph = get_parameter('id_custom_graph', null);
|
|||
$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);
|
||||
|
|
@ -604,6 +607,12 @@ switch ($action) {
|
|||
if ($type_percentile == 'percentile') {
|
||||
$values['type'] = PERCENTILE_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'interior_circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_INTERIOR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'bubble') {
|
||||
$values['type'] = PERCENTILE_BUBBLE;
|
||||
}
|
||||
|
|
@ -613,6 +622,10 @@ switch ($action) {
|
|||
if (($value_show == 'percent') ||
|
||||
($value_show == 'value'))
|
||||
$values['image'] = $value_show;
|
||||
|
||||
$values['border_color'] = $percentile_color;
|
||||
$values['fill_color'] = $percentile_label_color;
|
||||
$values['label'] = $percentile_label;
|
||||
}
|
||||
break;
|
||||
case 'icon':
|
||||
|
|
@ -783,6 +796,15 @@ switch ($action) {
|
|||
elseif ($elementFields['type'] == PERCENTILE_BUBBLE) {
|
||||
$elementFields['type_percentile'] = 'bubble';
|
||||
}
|
||||
elseif ($elementFields['type'] == CIRCULAR_PROGRESS_BAR) {
|
||||
$elementFields['type_percentile'] = 'circular_progress_bar';
|
||||
}
|
||||
elseif ($elementFields['type'] == CIRCULAR_INTERIOR_PROGRESS_BAR) {
|
||||
$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':
|
||||
|
|
@ -936,12 +958,21 @@ switch ($action) {
|
|||
if ($type_percentile == 'percentile') {
|
||||
$values['type'] = PERCENTILE_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'interior_circular_progress_bar') {
|
||||
$values['type'] = CIRCULAR_INTERIOR_PROGRESS_BAR;
|
||||
}
|
||||
else {
|
||||
$values['type'] = PERCENTILE_BUBBLE;
|
||||
}
|
||||
$values['border_color'] = $percentile_color;
|
||||
$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;
|
||||
|
|
@ -979,7 +1010,7 @@ switch ($action) {
|
|||
}
|
||||
break;
|
||||
}
|
||||
|
||||
|
||||
$idData = db_process_sql_insert('tlayout_data', $values);
|
||||
|
||||
$return = array();
|
||||
|
|
@ -1033,9 +1064,17 @@ switch ($action) {
|
|||
$return['values']['height_box'] = $values['height'];
|
||||
break;
|
||||
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
$return['values']['type_percentile'] = 'bubble';
|
||||
break;
|
||||
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
$return['values']['type_percentile'] = 'circular_progress_bar';
|
||||
break;
|
||||
|
||||
case PERCENTILE_BUBBLE:
|
||||
$return['values']['type_percentile'] = 'interior_circular_progress_bar';
|
||||
break;
|
||||
|
||||
case PERCENTILE_BAR:
|
||||
$return['values']['type_percentile'] = 'percentile';
|
||||
|
|
|
|||
|
|
@ -197,6 +197,8 @@ define('SERVICE', 10); //Enterprise Item.
|
|||
define('GROUP_ITEM', 11);
|
||||
define('BOX_ITEM', 12);
|
||||
define('LINE_ITEM', 13);
|
||||
define('CIRCULAR_PROGRESS_BAR', 15);
|
||||
define('CIRCULAR_INTERIOR_PROGRESS_BAR', 16);
|
||||
define('DONUT_GRAPH', 17);
|
||||
define('BARS_GRAPH', 18);
|
||||
//Some styles
|
||||
|
|
|
|||
|
|
@ -31,6 +31,7 @@ require_once ($config['homedir'].'/include/functions_agents.php');
|
|||
require_once ($config['homedir'].'/include/functions_modules.php');
|
||||
require_once ($config['homedir'].'/include/functions_users.php');
|
||||
require_once ($config['homedir'].'/include/functions.php');
|
||||
require_once ($config['homedir'].'/include/graphs/functions_d3.php');
|
||||
|
||||
function visual_map_print_item_toolbox($idDiv, $text, $float) {
|
||||
if ($float == 'left') {
|
||||
|
|
@ -303,6 +304,8 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
break;
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
if (!empty($layoutData['id_agent'])
|
||||
&& empty($layoutData['id_layout_linked'])) {
|
||||
|
||||
|
|
@ -615,6 +618,8 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
break;
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
if (!empty($layoutData['id_agent'])) {
|
||||
|
||||
//Extract id service if it is a prediction module.
|
||||
|
|
@ -834,6 +839,8 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
break;
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
//Metaconsole db connection
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$connection = db_get_row_filter ('tmetaconsole_setup',
|
||||
|
|
@ -1161,6 +1168,8 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
break;
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
$class .= "percentile_item";
|
||||
break;
|
||||
case MODULE_GRAPH:
|
||||
|
|
@ -1431,145 +1440,173 @@ function visual_map_print_item($mode = "read", $layoutData,
|
|||
break;
|
||||
|
||||
case PERCENTILE_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 (($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 ($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) {
|
||||
$img = '<img src="images/console/signes/percentil.png" style="width:130px;height:30px;'.$imgpos.'">';
|
||||
if (get_parameter('action') == 'edit' || (get_parameter('operation') == 'edit_visualmap')) {
|
||||
if($width == 0){
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . 'images/console/signes/percentil.png" style="width:130px;height:30px;'.$imgpos.'">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/percentil.png" style="width:130px;height:30px;'.$imgpos.'">';
|
||||
}
|
||||
}
|
||||
else {
|
||||
$img = '<img src="images/console/signes/percentil.png" style="width:'.$width.'px;height:30px;'.$imgpos.'">';
|
||||
else{
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . '/images/console/signes/percentil.png" style="width:'.$width.'px;height:30px;'.$imgpos.'">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/percentil.png" style="width:'.$width.'px;height:30px;'.$imgpos.'">';
|
||||
}
|
||||
}
|
||||
}
|
||||
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['label_position']=='left'){
|
||||
$imgpos = 'float:right;';
|
||||
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));
|
||||
|
||||
$percentile = $value_text;
|
||||
}
|
||||
else if($layoutData['label_position']=='right'){
|
||||
$imgpos = 'float:left;';
|
||||
else {
|
||||
$unit_text = "%";
|
||||
}
|
||||
|
||||
$progress_bar_heigh = 15;
|
||||
if (!empty($proportion)) {
|
||||
if ($width != 0) {
|
||||
$width = (integer)($proportion['proportion_width'] * $width);
|
||||
|
||||
if(get_parameter('action') == 'edit' || (get_parameter('operation') == 'edit_visualmap')){
|
||||
if($width == 0){
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . 'images/console/signes/percentil_bubble.png">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/percentil_bubble.png">';
|
||||
}
|
||||
}
|
||||
else{
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . '/images/console/signes/percentil_bubble.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/percentil_bubble.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';
|
||||
}
|
||||
}
|
||||
}
|
||||
else{
|
||||
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;
|
||||
|
||||
break;
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
if(get_parameter('action') == 'edit' || (get_parameter('operation') == 'edit_visualmap')){
|
||||
if($width == 0){
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . 'images/console/signes/circular-progress-bar.png">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/circular-progress-bar.png">';
|
||||
}
|
||||
}
|
||||
else{
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . '/images/console/signes/circular-progress-bar.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/circular-progress-bar.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
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));
|
||||
|
||||
$percentile = $value_text;
|
||||
}
|
||||
else {
|
||||
$width = (integer)($proportion['proportion_width'] * $infoImage[0]);
|
||||
$unit_text = "%";
|
||||
}
|
||||
|
||||
if ($height != 0) {
|
||||
$height = (integer)($proportion['proportion_height'] * $height);
|
||||
$progress_bar_heigh = $progress_bar_heigh * $proportion['proportion_height'];
|
||||
if($width == 0){
|
||||
$img = progress_circular_bar($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
|
||||
}
|
||||
else {
|
||||
$height = (integer)($proportion['proportion_height'] * $infoImage[1]);
|
||||
else{
|
||||
$img = progress_circular_bar($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_color);
|
||||
}
|
||||
}
|
||||
|
||||
echo $img;
|
||||
|
||||
if($layoutData['label_position']=='up'){
|
||||
echo io_safe_output($text);
|
||||
}
|
||||
|
||||
ob_start();
|
||||
if ($type == PERCENTILE_BUBBLE) {
|
||||
break;
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
if(get_parameter('action') == 'edit' || (get_parameter('operation') == 'edit_visualmap')){
|
||||
if($width == 0){
|
||||
echo progress_bubble($percentile, 100,100, '', 1, $value_text, $colorStatus,$s);
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . 'images/console/signes/circular-progress-bar-interior.png">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/circular-progress-bar-interior.png">';
|
||||
}
|
||||
}
|
||||
else{
|
||||
if ($layoutData['id_metaconsole'] != 0) {
|
||||
$img = '<img src="' . '../../' . '/images/console/signes/circular-progress-bar-interior.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/circular-progress-bar-interior.png" style="width:'.$width.'px;height:'.$width.'px;'.$imgpos.'">';
|
||||
}
|
||||
}
|
||||
}
|
||||
else {
|
||||
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));
|
||||
|
||||
$percentile = $value_text;
|
||||
}
|
||||
else {
|
||||
$unit_text = "%";
|
||||
}
|
||||
|
||||
if($width == 0){
|
||||
$img = progress_circular_bar_interior($id, $percentile, 200,200, $border_color, $unit_text, $label, $fill_color);
|
||||
|
||||
}
|
||||
else{
|
||||
echo progress_bubble($percentile, $width,$width, '', 1, $value_text, $colorStatus);
|
||||
$img = progress_circular_bar_interior($id, $percentile, $width, $width, $border_color, $unit_text, $label, $fill_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/percentil_bubble.png" style="width:130px;height:130px;'.$imgpos.'">';
|
||||
}
|
||||
else{
|
||||
$img = '<img src="images/console/signes/percentil_bubble.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);
|
||||
|
||||
}
|
||||
|
||||
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);
|
||||
}
|
||||
echo $img;
|
||||
|
||||
break;
|
||||
|
||||
case MODULE_GRAPH:
|
||||
if ($layoutData['label_position']=='up') {
|
||||
echo io_safe_output($text);
|
||||
|
|
@ -1912,11 +1949,19 @@ function visual_map_process_wizard_add ($id_agents, $image, $id_layout, $range,
|
|||
switch ($type) {
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
$value_height = $max_value;
|
||||
$value_image = $value_show;
|
||||
if ($type_percentile == 'percentile') {
|
||||
$value_type = PERCENTILE_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'interior_circular_progress_bar') {
|
||||
$value_type = CIRCULAR_INTERIOR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'circular_progress_bar') {
|
||||
$value_type = CIRCULAR_PROGRESS_BAR;
|
||||
}
|
||||
else {
|
||||
$value_type = PERCENTILE_BUBBLE;
|
||||
}
|
||||
|
|
@ -2038,12 +2083,20 @@ function visual_map_process_wizard_add_modules ($id_modules, $image,
|
|||
switch ($type) {
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
$value_height = $max_value;
|
||||
$value_width = $percentileitem_width;
|
||||
$value_image = $value_show;
|
||||
if ($type_percentile == 'percentile') {
|
||||
$value_type = PERCENTILE_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'interior_circular_progress_bar') {
|
||||
$value_type = CIRCULAR_INTERIOR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'circular_progress_bar') {
|
||||
$value_type = CIRCULAR_PROGRESS_BAR;
|
||||
}
|
||||
else {
|
||||
$value_type = PERCENTILE_BUBBLE;
|
||||
}
|
||||
|
|
@ -2166,12 +2219,20 @@ function visual_map_process_wizard_add_agents ($id_agents, $image,
|
|||
switch ($type) {
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
$value_height = $max_value;
|
||||
$value_width = $percentileitem_width;
|
||||
$value_image = $value_show;
|
||||
if ($type_percentile == 'percentile') {
|
||||
$value_type = PERCENTILE_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'interior_circular_progress_bar') {
|
||||
$value_type = CIRCULAR_INTERIOR_PROGRESS_BAR;
|
||||
}
|
||||
elseif ($type_percentile == 'circular_progress_bar') {
|
||||
$value_type = CIRCULAR_PROGRESS_BAR;
|
||||
}
|
||||
else {
|
||||
$value_type = PERCENTILE_BUBBLE;
|
||||
}
|
||||
|
|
@ -2478,6 +2539,8 @@ function visual_map_get_status_element($layoutData) {
|
|||
|
||||
case PERCENTILE_BAR:
|
||||
case PERCENTILE_BUBBLE:
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
|
||||
if (empty($module_value) || $module_value == '') {
|
||||
return VISUAL_MAP_STATUS_UNKNOWN;
|
||||
|
|
@ -2978,6 +3041,14 @@ function visual_map_create_internal_name_item($label = null, $type, $image, $age
|
|||
case PERCENTILE_BAR:
|
||||
$text = __('Percentile bar');
|
||||
break;
|
||||
case 'circular_progress_bar':
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
$text = __('Circular progress bar');
|
||||
break;
|
||||
case 'interior_circular_progress_bar':
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
$text = __('Circular progress bar (interior)');
|
||||
break;
|
||||
case 'static_graph':
|
||||
case STATIC_GRAPH:
|
||||
$text = __('Static graph') . " - " .
|
||||
|
|
@ -3082,6 +3153,12 @@ function visual_map_type_in_js($type) {
|
|||
case PERCENTILE_BAR:
|
||||
return 'percentile_item';
|
||||
break;
|
||||
case CIRCULAR_PROGRESS_BAR:
|
||||
return 'percentile_item';
|
||||
break;
|
||||
case CIRCULAR_INTERIOR_PROGRESS_BAR:
|
||||
return 'percentile_item';
|
||||
break;
|
||||
case MODULE_GRAPH:
|
||||
return 'module_graph';
|
||||
break;
|
||||
|
|
|
|||
|
|
@ -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',
|
||||
|
|
@ -408,23 +406,22 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
__('Max value') . '</td>
|
||||
<td align="left">' . html_print_input_text('max_percentile', 0, '', 3, 5, true) . '</td>';
|
||||
|
||||
$percentile_type = array('percentile' => __('Percentile'), 'bubble' => __('Bubble'), 'circular_progress_bar' => __('Circular porgress bar'), 'interior_circular_progress_bar' => __('Circular progress bar (interior)'));
|
||||
$percentile_value = array('percent' => __('Percent'), 'value' => __('Value'));
|
||||
if (is_metaconsole()){
|
||||
$form_items['percentile_item_row_3'] = array();
|
||||
$form_items['percentile_item_row_3']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_3']['html'] = '<td align="left">' .
|
||||
__('Type') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('type_percentile', 'percentile', ('Percentile'), 'percentile', false, '', 'style="float: left;"', true) .
|
||||
html_print_radio_button_extended('type_percentile', 'bubble', ('Bubble'), 'percentile', false, '', 'style="float: left;"', true) .
|
||||
html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true, false, false, '', false, 'style="float: left;"') .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['percentile_item_row_4'] = array();
|
||||
$form_items['percentile_item_row_4']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_4']['html'] = '<td align="left">' . __('Value to show') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('value_show', 'percent', ('Percent'), 'value', false, '', 'style="float: left;"', true) .
|
||||
html_print_radio_button_extended('value_show', 'value', ('Value'), 'value', false, '', 'style="float: left;"', true) .
|
||||
html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true, false, false, '', false, 'style="float: left;"') .
|
||||
'</td>';
|
||||
}
|
||||
else{
|
||||
|
|
@ -433,20 +430,40 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$form_items['percentile_item_row_3']['html'] = '<td align="left">' .
|
||||
__('Type') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('type_percentile', 'percentile', ('Percentile'), 'percentile', false, '', '', true) .
|
||||
html_print_radio_button_extended('type_percentile', 'bubble', ('Bubble'), 'percentile', false, '', '', true) .
|
||||
html_print_select($percentile_type, 'type_percentile', 'percentile', '', '', '', true) .
|
||||
'</td>';
|
||||
|
||||
|
||||
$form_items['percentile_item_row_4'] = array();
|
||||
$form_items['percentile_item_row_4']['items'] = array('percentile_bar', 'percentile_item', 'datos');
|
||||
$form_items['percentile_item_row_4']['html'] = '<td align="left">' . __('Value to show') . '</td>
|
||||
<td align="left">' .
|
||||
html_print_radio_button_extended('value_show', 'percent', ('Percent'), 'value', false, '', '', true) .
|
||||
html_print_radio_button_extended('value_show', 'value', ('Value'), 'value', false, '', '', true) .
|
||||
html_print_select($percentile_value, 'value_show', 'percent', '', '', '', true) .
|
||||
'</td>';
|
||||
}
|
||||
|
||||
$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">' . __('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');
|
||||
|
|
@ -614,6 +631,8 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
|
|||
$(".border_color").attachColorPicker();
|
||||
$(".fill_color").attachColorPicker();
|
||||
$(".line_color").attachColorPicker();
|
||||
$(".percentile_color").attachColorPicker();
|
||||
$(".percentile_label_color").attachColorPicker();
|
||||
|
||||
$("input[name=radio_choice]").change(function(){
|
||||
$('#count_items').html(1);
|
||||
|
|
|
|||
|
|
@ -33,6 +33,7 @@ function include_javascript_d3 ($return = false) {
|
|||
$output .= '<script type="text/javascript" src="' . $config['homeurl'] . 'include/graphs/pandora.d3.js" charset="utf-8"></script>';
|
||||
}
|
||||
}
|
||||
|
||||
if (!$return)
|
||||
echo $output;
|
||||
|
||||
|
|
@ -315,25 +316,69 @@ function ux_console_phases_donut ($phases, $id, $return = false) {
|
|||
return $output;
|
||||
}
|
||||
|
||||
function d3_donut_graph ($id, $width, $height, $module_data) {
|
||||
function d3_progress_bar ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
|
||||
global $config;
|
||||
|
||||
$module_data = json_encode($module_data);
|
||||
$recipient_name = "progress_bar_" . $id;
|
||||
$recipient_name_to_js = "#progress_bar_" . $id;
|
||||
|
||||
$recipient_name = "donut_graph_" . $id;
|
||||
$recipient_name_to_js = "#donut_graph_" . $id;
|
||||
$output = "";
|
||||
|
||||
$output = "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
|
||||
$output .= "<div id=" . $recipient_name . " style='overflow: hidden;'></div>";
|
||||
$output .= include_javascript_d3(true);
|
||||
$output .= "<style type=\"text/css\">
|
||||
path {
|
||||
stroke: #fff;
|
||||
fill-rule: evenodd;
|
||||
}
|
||||
</style>";
|
||||
|
||||
$output .= "<script language=\"javascript\" type=\"text/javascript\">
|
||||
print_donut_graph('" . $recipient_name_to_js . "', " . $width . ", " . $height . ", " . $module_data . ");
|
||||
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;
|
||||
$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 . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
|
||||
</script>";
|
||||
|
||||
return $output;
|
||||
}
|
||||
|
||||
function progress_circular_bar_interior ($id, $percentile, $width, $height, $color, $unit = "%", $text = "", $fill_color = "#FFFFFF") {
|
||||
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 . "', '" . $unit . "', '" . $text . "', '" . $fill_color . "');
|
||||
</script>";
|
||||
|
||||
return $output;
|
||||
|
|
|
|||
|
|
@ -1494,118 +1494,472 @@ function print_phases_donut (recipient, phases) {
|
|||
}
|
||||
}
|
||||
|
||||
function print_donut_graph (recipient, width, height, module_data) {
|
||||
var svg = d3.select(recipient)
|
||||
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 circle = d3.select(recipient)
|
||||
.append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g");
|
||||
.attr("height", height);
|
||||
|
||||
svg.append("g")
|
||||
.attr("class", "slices");
|
||||
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 radius = 120;
|
||||
var increment_y = 60;
|
||||
var increment_y_padding = 25;
|
||||
var text_size = 15;
|
||||
var decrement_x_padding = 150;
|
||||
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) {
|
||||
var percent_value = Number(bar_progress * 100);
|
||||
numberText.text(percent_value.toFixed());
|
||||
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 numberSize = 0;
|
||||
var textSize = 0;
|
||||
var unitSize = 0;
|
||||
var yPosText = 0;
|
||||
var yPosNumber = 0;
|
||||
if (width >= 500) {
|
||||
radius = 160;
|
||||
increment_y = 60;
|
||||
text_size = 25;
|
||||
increment_y_padding = 25;
|
||||
decrement_x_padding = 75;
|
||||
numberSize = 100;
|
||||
textSize = 50;
|
||||
unitSize = 50;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-100';
|
||||
}
|
||||
else if (width >= 400) {
|
||||
radius = 120;
|
||||
increment_y = 60;
|
||||
text_size = 22;
|
||||
increment_y_padding = 25;
|
||||
decrement_x_padding = 75;
|
||||
numberSize = 80;
|
||||
textSize = 40;
|
||||
unitSize = 40;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-80';
|
||||
}
|
||||
else if (width >= 300) {
|
||||
radius = 80;
|
||||
increment_y = 40;
|
||||
text_size = 14;
|
||||
increment_y_padding = 20;
|
||||
decrement_x_padding = 60;
|
||||
numberSize = 60;
|
||||
textSize = 30;
|
||||
unitSize = 30;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-45';
|
||||
}
|
||||
else if (width >= 200) {
|
||||
radius = 50;
|
||||
increment_y = 40;
|
||||
text_size = 14;
|
||||
increment_y_padding = 15;
|
||||
decrement_x_padding = 45;
|
||||
numberSize = 40;
|
||||
textSize = 20;
|
||||
unitSize = 20;
|
||||
yPosNumber = '50';
|
||||
yPosText = '-30';
|
||||
}
|
||||
else if (width >= 100) {
|
||||
radius = 20;
|
||||
increment_y = 20;
|
||||
text_size = 10;
|
||||
increment_y_padding = 8;
|
||||
decrement_x_padding = 25;
|
||||
numberSize = 20;
|
||||
textSize = 10;
|
||||
unitSize = 10;
|
||||
yPosNumber = '5';
|
||||
yPosText = '-20';
|
||||
}
|
||||
else {
|
||||
radius = 10;
|
||||
increment_y = 10;
|
||||
text_size = 4;
|
||||
increment_y_padding = 3;
|
||||
decrement_x_padding = 5;
|
||||
numberSize = 10;
|
||||
textSize = 8;
|
||||
unitSize = 8;
|
||||
yPosNumber = '5';
|
||||
yPosText = '-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)
|
||||
.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', -(width/3))
|
||||
.attr('text-anchor', 'middle');
|
||||
|
||||
var numberText = 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", numberSize)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', width/2);
|
||||
|
||||
function updateProgress(bar_progress) {
|
||||
var percent_value = Number(bar_progress * 100);
|
||||
numberText.text(percent_value.toFixed() + " %");
|
||||
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);
|
||||
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 numberSize = 0;
|
||||
var textSize = 0;
|
||||
var unitSize = 0;
|
||||
var yPosText = 0;
|
||||
var yPosUnit = 0;
|
||||
var yPosNumber = 0;
|
||||
if (width >= 500) {
|
||||
numberSize = 100;
|
||||
textSize = 50;
|
||||
unitSize = 50;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-100';
|
||||
yPosUnit = '100';
|
||||
}
|
||||
else if (width >= 400) {
|
||||
numberSize = 80;
|
||||
textSize = 40;
|
||||
unitSize = 40;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-80';
|
||||
yPosUnit = '80';
|
||||
}
|
||||
else if (width >= 300) {
|
||||
numberSize = 60;
|
||||
textSize = 30;
|
||||
unitSize = 30;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-45';
|
||||
yPosUnit = '60';
|
||||
}
|
||||
else if (width >= 200) {
|
||||
numberSize = 40;
|
||||
textSize = 20;
|
||||
unitSize = 20;
|
||||
yPosNumber = '10';
|
||||
yPosText = '-30';
|
||||
yPosUnit = '40';
|
||||
}
|
||||
else if (width >= 100) {
|
||||
numberSize = 20;
|
||||
textSize = 10;
|
||||
unitSize = 10;
|
||||
yPosNumber = '5';
|
||||
yPosText = '-15';
|
||||
yPosUnit = '20';
|
||||
}
|
||||
else {
|
||||
numberSize = 8;
|
||||
textSize = 4;
|
||||
unitSize = 4;
|
||||
yPosNumber = '2';
|
||||
yPosText = '-5';
|
||||
yPosUnit = '5';
|
||||
}
|
||||
|
||||
var arc = d3.svg.arc()
|
||||
.outerRadius(radius * 0.8)
|
||||
.innerRadius(radius * 0.4);
|
||||
.startAngle(0)
|
||||
.innerRadius(radius)
|
||||
.outerRadius(radius - border);
|
||||
|
||||
var key = function(d){ return d.data.label; };
|
||||
var circle = d3.select(recipient)
|
||||
.append("svg")
|
||||
.attr("width", width)
|
||||
.attr("height", height)
|
||||
.append("g")
|
||||
.attr("transform", "translate(" + (width/2) + ", " + (height/2) + ")");
|
||||
|
||||
var pie = d3.layout.pie()
|
||||
.sort(null)
|
||||
.value(function(d) {
|
||||
return parseFloat(d.percent);
|
||||
});
|
||||
var meter = circle.append("g")
|
||||
.attr('class', 'progress-meter');
|
||||
|
||||
jQuery.each(module_data, function (key, m_d) {
|
||||
svg.append("g")
|
||||
.append("text")
|
||||
.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
|
||||
.text(m_d.tag_name)
|
||||
.style("font-family", "Verdana")
|
||||
.style("font-size", text_size + "px");
|
||||
|
||||
increment_y -= increment_y_padding;
|
||||
});
|
||||
meter.append("path")
|
||||
.attr('fill', '#000000')
|
||||
.attr('fill-opacity', 0.5)
|
||||
.attr('d', arc.endAngle(twoPi));
|
||||
|
||||
function donutData (){
|
||||
return module_data.map(function(m_data){
|
||||
return { label: m_data.tag_name, percent: m_data.percent, color : m_data.color}
|
||||
});
|
||||
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 labelText = circle.append("text")
|
||||
.attr('fill', label_color)
|
||||
.style("font-family", "arial")
|
||||
.style("font-weight", "bold")
|
||||
.style("font-size", textSize)
|
||||
.html(label)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', yPosText);
|
||||
|
||||
var numberText = circle.append("text")
|
||||
.attr('fill', '#000000')
|
||||
.style("font-family", "arial")
|
||||
.style("font-weight", "bold")
|
||||
.style("font-size", numberSize)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', yPosNumber);
|
||||
|
||||
var percentText = circle.append("text")
|
||||
.attr('fill', '#000000')
|
||||
.style("font-family", "arial")
|
||||
.style("font-weight", "bold")
|
||||
.style("font-size", unitSize)
|
||||
.text(unit)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', yPosUnit);
|
||||
|
||||
function updateProgress(progress) {
|
||||
foreground.attr('d', arc.endAngle(twoPi * progress));
|
||||
front.attr('d', arc.endAngle(twoPi * progress));
|
||||
var percent_value = Number(progress * 100);
|
||||
numberText.text(percent_value.toFixed());
|
||||
}
|
||||
|
||||
print_phases(donutData());
|
||||
var progress = startPercent;
|
||||
|
||||
function print_phases(data) {
|
||||
var slice = svg.select(".slices").selectAll("path.slice")
|
||||
.data(pie(data), key);
|
||||
(function loops() {
|
||||
updateProgress(progress);
|
||||
|
||||
slice.enter()
|
||||
.insert("path")
|
||||
.style("fill", function(d) {
|
||||
return d.data.color;
|
||||
})
|
||||
.attr("class", "slice")
|
||||
.attr("transform", "translate(" + width / 2 + "," + (height - radius) + ")");
|
||||
if (count > 0) {
|
||||
count--;
|
||||
progress += step;
|
||||
setTimeout(loops, 30);
|
||||
}
|
||||
})();
|
||||
}
|
||||
|
||||
slice.transition()
|
||||
.duration(0)
|
||||
.attrTween("d", function(d) {
|
||||
this._current = this._current || d;
|
||||
var interpolate = d3.interpolate(this._current, d);
|
||||
this._current = interpolate(0);
|
||||
return function(t) {
|
||||
return arc(interpolate(t));
|
||||
};
|
||||
});
|
||||
|
||||
slice.exit().remove();
|
||||
function print_interior_circular_progress_bar (recipient, percentile, width, height, color, unit, label, label_color) {
|
||||
var twoPi = Math.PI * 2;
|
||||
var radius = (width / 2) - 20;
|
||||
var radius2 = (width / 2);
|
||||
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 numberSize = 0;
|
||||
var textSize = 0;
|
||||
var unitSize = 0;
|
||||
var yPosText = 0;
|
||||
var yPosUnit = 0;
|
||||
var yPosNumber = 0;
|
||||
if (width >= 500) {
|
||||
numberSize = 100;
|
||||
textSize = 50;
|
||||
unitSize = 50;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-100';
|
||||
yPosUnit = '100';
|
||||
}
|
||||
else if (width >= 400) {
|
||||
numberSize = 80;
|
||||
textSize = 40;
|
||||
unitSize = 40;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-80';
|
||||
yPosUnit = '80';
|
||||
}
|
||||
else if (width >= 300) {
|
||||
numberSize = 60;
|
||||
textSize = 30;
|
||||
unitSize = 30;
|
||||
yPosNumber = '15';
|
||||
yPosText = '-45';
|
||||
yPosUnit = '60';
|
||||
}
|
||||
else if (width >= 200) {
|
||||
numberSize = 40;
|
||||
textSize = 20;
|
||||
unitSize = 20;
|
||||
yPosNumber = '10';
|
||||
yPosText = '-30';
|
||||
yPosUnit = '40';
|
||||
}
|
||||
else if (width >= 100) {
|
||||
numberSize = 20;
|
||||
textSize = 10;
|
||||
unitSize = 10;
|
||||
yPosNumber = '5';
|
||||
yPosText = '-15';
|
||||
yPosUnit = '20';
|
||||
}
|
||||
else {
|
||||
numberSize = 8;
|
||||
textSize = 4;
|
||||
unitSize = 4;
|
||||
yPosNumber = '2';
|
||||
yPosText = '-5';
|
||||
yPosUnit = '5';
|
||||
}
|
||||
|
||||
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 labelText = circle.append("text")
|
||||
.attr('fill', label_color)
|
||||
.style("font-family", "arial")
|
||||
.style("font-weight", "bold")
|
||||
.style("font-size", textSize)
|
||||
.html(label)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', yPosText);
|
||||
|
||||
var numberText = circle.append("text")
|
||||
.attr('fill', '#000000')
|
||||
.style("font-family", "arial")
|
||||
.style("font-weight", "bold")
|
||||
.style("font-size", numberSize)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', yPosNumber);
|
||||
|
||||
var percentText = circle.append("text")
|
||||
.attr('fill', '#000000')
|
||||
.style("font-family", "arial")
|
||||
.style("font-weight", "bold")
|
||||
.style("font-size", unitSize)
|
||||
.text(unit)
|
||||
.attr('text-anchor', 'middle')
|
||||
.attr('dy', yPosUnit);
|
||||
|
||||
function updateProgress(progress) {
|
||||
foreground.attr('d', arc.endAngle(twoPi * progress));
|
||||
front.attr('d', arc.endAngle(twoPi * progress));
|
||||
var percent_value = Number(progress * 100);
|
||||
numberText.text(percent_value.toFixed());
|
||||
}
|
||||
|
||||
var progress = startPercent;
|
||||
|
||||
(function loops() {
|
||||
updateProgress(progress);
|
||||
|
||||
if (count > 0) {
|
||||
count--;
|
||||
progress += step;
|
||||
setTimeout(loops, 30);
|
||||
}
|
||||
})();
|
||||
}
|
||||
Loading…
Reference in New Issue