Merge branch '1378-donut-graph-element-in-visual-console-dev' into 'develop'

Added color to resume data

See merge request artica/pandorafms!1039
This commit is contained in:
vgilc 2017-11-08 10:47:49 +01:00
commit 0344b7d5d8
6 changed files with 38 additions and 6 deletions

View File

@ -835,6 +835,7 @@ function readFields() {
values['height_box'] = parseInt(
$("input[name='height_box']").val());
values['border_color'] = $("input[name='border_color']").val();
values['resume_color'] = $("input[name='resume_color']").val();
values['grid_color'] = $("input[name='grid_color']").val();
values['border_width'] = parseInt(
$("input[name='border_width']").val());
@ -1545,6 +1546,11 @@ function loadFieldsFromDB(item) {
$("#grid_color_row .ColorPickerDivSample")
.css('background-color', val);
}
if (key == 'resume_color') {
$("input[name='resume_color']").val(val);
$("#resume_color_row .ColorPickerDivSample")
.css('background-color', val);
}
if (key == 'border_width')
$("input[name='border_width']").val(val);
if (key == 'fill_color') {
@ -1792,6 +1798,9 @@ function hiddenFields(item) {
$("#grid_color_row").css('display', 'none');
$("#grid_color_row." + item).css('display', '');
$("#resume_color_row").css('display', 'none');
$("#resume_color_row." + item).css('display', '');
$("#border_width_row").css('display', 'none');
$("#border_width_row." + item).css('display', '');
@ -1845,6 +1854,7 @@ function cleanFields(item) {
$("input[name='height_box']").val(180);
$("input[name='border_color']").val('#000000');
$("input[name='grid_color']").val('#000000');
$("input[name='resume_color']").val('#000000');
$("input[name='border_width']").val(3);
$("input[name='fill_color']").val('#ffffff');
$("input[name='line_width']").val(3);

View File

@ -119,6 +119,7 @@ $id_custom_graph = get_parameter('id_custom_graph', null);
$border_width = (int)get_parameter('border_width', 0);
$border_color = get_parameter('border_color', '');
$grid_color = get_parameter('grid_color', '');
$resume_color = get_parameter('resume_color', '');
$fill_color = get_parameter('fill_color', '');
$percentile_color = get_parameter('percentile_color', '');
$percentile_label = io_safe_output(get_parameter('percentile_label', ''));
@ -608,6 +609,7 @@ switch ($action) {
$values['width'] = $width_percentile;
$values['height'] = $width_percentile;
}
$values['border_color'] = $resume_color;
$values['type'] = DONUT_GRAPH;
break;
@ -744,6 +746,10 @@ switch ($action) {
unset($values['type_graph']);
unset($values['border_color']);
break;
case 'donut_graph':
unset($values['border_color']);
unset($values['width']);
break;
case 'box_item':
unset($values['border_width']);
unset($values['border_color']);
@ -886,6 +892,7 @@ switch ($action) {
break;
case 'donut_graph':
$elementFields['width_percentile'] = $elementFields['width'];
$elementFields['resume_color'] = $elementFields['border_color'];
break;
case 'module_graph':
@ -1005,6 +1012,7 @@ switch ($action) {
$values['type'] = DONUT_GRAPH;
$values['width'] = $width;
$values['height'] = $height;
$values['border_color'] = $resume_color;
break;
case 'module_graph':
$values['type'] = MODULE_GRAPH;

View File

@ -1436,10 +1436,10 @@ function visual_map_print_item($mode = "read", $layoutData,
}
else {
if ($width == 0) {
$img = d3_donut_graph ($layoutData['id'], 400, 400, $donut_data);
$img = d3_donut_graph ($layoutData['id'], 400, 400, $donut_data, $layoutData['border_color']);
}
else{
$img = d3_donut_graph ($layoutData['id'], $width, $width, $donut_data);
$img = d3_donut_graph ($layoutData['id'], $width, $width, $donut_data, $layoutData['border_color']);
}
}
}

View File

@ -331,6 +331,18 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
html_print_select(array(), 'module', '', '', __('Any'), 0, true) . '<div id="data_image_container" style="display:none;"><span id="data_image_check_label" style="margin-left:20px;">'.__("Data image").': </span><span id="data_image_check">Off</span><span id="data_image_width_label"> - Width: </span><input style="margin-left:5px;width:40px;" type="number" min="0" id="data_image_width" value="100"></input></div>
</td>';
$form_items['resume_color_row'] = array();
$form_items['resume_color_row']['items'] = array('donut_graph');
$form_items['resume_color_row']['html'] =
'<td align="left" valign="top" style="">' .
__('Resume data color') .
'</td>' .
'<td align="left" style="">' .
html_print_input_text_extended ('resume_color',
'#000000', 'text-resume_color', '', 7, 7, false,
'', 'class="resume_color"', true) .
'</td>';
$event_times = array(86400 => __('24h'),
28800 => __('8h'),
7200 => __('2h'),
@ -657,6 +669,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$(".line_color").attachColorPicker();
$(".percentile_color").attachColorPicker();
$(".percentile_label_color").attachColorPicker();
$(".resume_color").attachColorPicker();
$(".grid_color").attachColorPicker();
$("input[name=radio_choice]").change(function(){

View File

@ -384,7 +384,7 @@ function progress_circular_bar_interior ($id, $percentile, $width, $height, $col
return $output;
}
function d3_donut_graph ($id, $width, $height, $module_data) {
function d3_donut_graph ($id, $width, $height, $module_data, $resume_color) {
global $config;
$module_data = json_encode($module_data);
@ -402,7 +402,7 @@ function d3_donut_graph ($id, $width, $height, $module_data) {
</style>";
$output .= "<script language=\"javascript\" type=\"text/javascript\">
print_donut_graph('" . $recipient_name_to_js . "', " . $width . ", " . $height . ", " . $module_data . ");
print_donut_graph('" . $recipient_name_to_js . "', " . $width . ", " . $height . ", " . $module_data . ", '" . $resume_color . "');
</script>";
return $output;

View File

@ -1972,7 +1972,7 @@ function print_interior_circular_progress_bar (recipient, percentile, width, hei
})();
}
function print_donut_graph (recipient, width, height, module_data) {
function print_donut_graph (recipient, width, height, module_data, resume_color) {
var svg = d3.select(recipient)
.append("svg")
.attr("width", width)
@ -2041,10 +2041,11 @@ function print_donut_graph (recipient, width, height, module_data) {
.value(function(d) {
return parseFloat(d.percent);
});
console.log(resume_color);
jQuery.each(module_data, function (key, m_d) {
svg.append("g")
.append("text")
.attr('fill', resume_color)
.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
.text(m_d.tag_name)
.style("font-family", "Verdana")