Added color to resume data

This commit is contained in:
Arturo Gonzalez 2017-11-08 10:21:09 +01:00
parent b461121361
commit 3de0e38c2d
6 changed files with 38 additions and 6 deletions

View File

@ -835,6 +835,7 @@ function readFields() {
values['height_box'] = parseInt( values['height_box'] = parseInt(
$("input[name='height_box']").val()); $("input[name='height_box']").val());
values['border_color'] = $("input[name='border_color']").val(); values['border_color'] = $("input[name='border_color']").val();
values['resume_color'] = $("input[name='resume_color']").val();
values['border_width'] = parseInt( values['border_width'] = parseInt(
$("input[name='border_width']").val()); $("input[name='border_width']").val());
values['fill_color'] = $("input[name='fill_color']").val(); values['fill_color'] = $("input[name='fill_color']").val();
@ -1539,6 +1540,11 @@ function loadFieldsFromDB(item) {
$("#border_color_row .ColorPickerDivSample") $("#border_color_row .ColorPickerDivSample")
.css('background-color', val); .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') if (key == 'border_width')
$("input[name='border_width']").val(val); $("input[name='border_width']").val(val);
if (key == 'fill_color') { if (key == 'fill_color') {
@ -1783,6 +1789,9 @@ function hiddenFields(item) {
$("#border_color_row").css('display', 'none'); $("#border_color_row").css('display', 'none');
$("#border_color_row." + item).css('display', ''); $("#border_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").css('display', 'none');
$("#border_width_row." + item).css('display', ''); $("#border_width_row." + item).css('display', '');
@ -1835,6 +1844,7 @@ function cleanFields(item) {
$("input[name='width_box']").val(300); $("input[name='width_box']").val(300);
$("input[name='height_box']").val(180); $("input[name='height_box']").val(180);
$("input[name='border_color']").val('#000000'); $("input[name='border_color']").val('#000000');
$("input[name='resume_color']").val('#000000');
$("input[name='border_width']").val(3); $("input[name='border_width']").val(3);
$("input[name='fill_color']").val('#ffffff'); $("input[name='fill_color']").val('#ffffff');
$("input[name='line_width']").val(3); $("input[name='line_width']").val(3);

View File

@ -118,6 +118,7 @@ $id_group = (int)get_parameter('id_group', 0);
$id_custom_graph = get_parameter('id_custom_graph', null); $id_custom_graph = get_parameter('id_custom_graph', null);
$border_width = (int)get_parameter('border_width', 0); $border_width = (int)get_parameter('border_width', 0);
$border_color = get_parameter('border_color', ''); $border_color = get_parameter('border_color', '');
$resume_color = get_parameter('resume_color', '');
$fill_color = get_parameter('fill_color', ''); $fill_color = get_parameter('fill_color', '');
$percentile_color = get_parameter('percentile_color', ''); $percentile_color = get_parameter('percentile_color', '');
$percentile_label = io_safe_output(get_parameter('percentile_label', '')); $percentile_label = io_safe_output(get_parameter('percentile_label', ''));
@ -607,6 +608,7 @@ switch ($action) {
$values['width'] = $width_percentile; $values['width'] = $width_percentile;
$values['height'] = $width_percentile; $values['height'] = $width_percentile;
} }
$values['border_color'] = $resume_color;
$values['type'] = DONUT_GRAPH; $values['type'] = DONUT_GRAPH;
break; break;
@ -739,6 +741,10 @@ switch ($action) {
unset($values['image']); unset($values['image']);
unset($values['type_graph']); unset($values['type_graph']);
break; break;
case 'donut_graph':
unset($values['border_color']);
unset($values['width']);
break;
case 'box_item': case 'box_item':
unset($values['border_width']); unset($values['border_width']);
unset($values['border_color']); unset($values['border_color']);
@ -882,6 +888,7 @@ switch ($action) {
break; break;
case 'donut_graph': case 'donut_graph':
$elementFields['width_percentile'] = $elementFields['width']; $elementFields['width_percentile'] = $elementFields['width'];
$elementFields['resume_color'] = $elementFields['border_color'];
break; break;
case 'module_graph': case 'module_graph':
@ -1000,6 +1007,7 @@ switch ($action) {
$values['type'] = DONUT_GRAPH; $values['type'] = DONUT_GRAPH;
$values['width'] = $width; $values['width'] = $width;
$values['height'] = $height; $values['height'] = $height;
$values['border_color'] = $resume_color;
break; break;
case 'module_graph': case 'module_graph':
$values['type'] = MODULE_GRAPH; $values['type'] = MODULE_GRAPH;

View File

@ -1436,10 +1436,10 @@ function visual_map_print_item($mode = "read", $layoutData,
} }
else { else {
if ($width == 0) { 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{ 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

@ -319,6 +319,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> 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>'; </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'), $event_times = array(86400 => __('24h'),
28800 => __('8h'), 28800 => __('8h'),
7200 => __('2h'), 7200 => __('2h'),
@ -645,6 +657,7 @@ function visual_map_editor_print_item_palette($visualConsole_id, $background) {
$(".line_color").attachColorPicker(); $(".line_color").attachColorPicker();
$(".percentile_color").attachColorPicker(); $(".percentile_color").attachColorPicker();
$(".percentile_label_color").attachColorPicker(); $(".percentile_label_color").attachColorPicker();
$(".resume_color").attachColorPicker();
$("input[name=radio_choice]").change(function(){ $("input[name=radio_choice]").change(function(){
$('#count_items').html(1); $('#count_items').html(1);

View File

@ -384,7 +384,7 @@ function progress_circular_bar_interior ($id, $percentile, $width, $height, $col
return $output; return $output;
} }
function d3_donut_graph ($id, $width, $height, $module_data) { function d3_donut_graph ($id, $width, $height, $module_data, $resume_color) {
global $config; global $config;
$module_data = json_encode($module_data); $module_data = json_encode($module_data);
@ -402,7 +402,7 @@ function d3_donut_graph ($id, $width, $height, $module_data) {
</style>"; </style>";
$output .= "<script language=\"javascript\" type=\"text/javascript\"> $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>"; </script>";
return $output; 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) var svg = d3.select(recipient)
.append("svg") .append("svg")
.attr("width", width) .attr("width", width)
@ -2041,10 +2041,11 @@ function print_donut_graph (recipient, width, height, module_data) {
.value(function(d) { .value(function(d) {
return parseFloat(d.percent); return parseFloat(d.percent);
}); });
console.log(resume_color);
jQuery.each(module_data, function (key, m_d) { jQuery.each(module_data, function (key, m_d) {
svg.append("g") svg.append("g")
.append("text") .append("text")
.attr('fill', resume_color)
.attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")") .attr("transform", "translate(" + (((width / 2) - (radius + decrement_x_padding))) + "," + (((height / 2) - radius) - increment_y) + ")")
.text(m_d.tag_name) .text(m_d.tag_name)
.style("font-family", "Verdana") .style("font-family", "Verdana")