add height and round border in d3 graph progress

Former-commit-id: 8eacfe068c1ae744fd04a752f65ed44f747d6158
This commit is contained in:
Daniel Barbero 2019-03-15 10:22:55 +01:00
parent 0593e72f3e
commit 7e345035e1
3 changed files with 51 additions and 16 deletions

View File

@ -43,9 +43,15 @@ if ($progress_task_discovery) {
$id_task,
90,
460,
50,
'#EA5434'
30,
'#EA5434',
'%',
'',
'#FFFFFF',
0,
0
);
$result .= '</li>';
$result .= '<li><h1>'.__('Searching devices in').' red a scanear</h1></li>';
$result .= '<li>';
@ -53,9 +59,15 @@ if ($progress_task_discovery) {
$id_task.'_2',
30,
460,
50,
'#2751E1'
30,
'#2751E1',
'%',
'',
'#FFFFFF',
0,
0
);
$result .= '</li>';
$result .= '<li><h1>'.__('Summary').'</h1></li>';
$result .= '<li><span><b>'.__('Estimated').'</b>: total de host</span></li>';

View File

@ -354,8 +354,18 @@ function ux_console_phases_donut($phases, $id, $return=false)
}
function d3_progress_bar($id, $percentile, $width, $height, $color, $unit='%', $text='', $fill_color='#FFFFFF')
{
function d3_progress_bar(
$id,
$percentile,
$width,
$height,
$color,
$unit='%',
$text='',
$fill_color='#FFFFFF',
$radiusx=10,
$radiusy=10
) {
global $config;
$recipient_name = 'progress_bar_'.$id;
@ -366,8 +376,19 @@ function d3_progress_bar($id, $percentile, $width, $height, $color, $unit='%', $
$output .= '<div id='.$recipient_name." style='overflow: hidden;'></div>";
$output .= include_javascript_d3(true);
$output .= "<script language=\"javascript\" type=\"text/javascript\">
progress_bar_d3('".$recipient_name_to_js."', ".(int) $percentile.', '.(int) $width.', '.(int) $height.", '".$color."', '".$unit."', '".$text."', '".$fill_color."');
</script>";
progress_bar_d3(
'".$recipient_name_to_js."',
".(int) $percentile.',
'.(int) $width.',
'.(int) $height.",
'".$color."',
'".$unit."',
'".$text."',
'".$fill_color."',
".(int) $radiusx.',
'.(int) $radiusy.',
);
</script>';
return $output;
}

View File

@ -1782,7 +1782,9 @@ function progress_bar_d3(
color,
unit,
label,
label_color
label_color,
radiusx,
radiusy
) {
var startPercent = 0;
var endPercent = parseInt(percentile) / 100;
@ -1799,20 +1801,20 @@ function progress_bar_d3(
.append("rect")
.attr("fill", "#000000")
.attr("fill-opacity", 0.5)
.attr("height", 20)
.attr("height", height)
.attr("width", width)
.attr("rx", 10)
.attr("ry", 10)
.attr("rx", radiusx)
.attr("ry", radiusy)
.attr("x", 0);
var progress_front = circle
.append("rect")
.attr("fill", color)
.attr("fill-opacity", 1)
.attr("height", 20)
.attr("height", height)
.attr("width", 0)
.attr("rx", 10)
.attr("ry", 10)
.attr("rx", radiusx)
.attr("ry", radiusy)
.attr("x", 0);
var labelText = circle
@ -1834,7 +1836,7 @@ function progress_bar_d3(
.style("font-weight", "bold")
.style("font-size", 14)
.attr("text-anchor", "middle")
.attr("dy", "-10");
.attr("dy", (height - height / 2) / 4);
function updateProgress(bar_progress) {
var percent_value = Number(bar_progress * 100);