phpchartjs pandora_enterprise#9554

This commit is contained in:
daniel 2022-12-23 11:34:35 +01:00
parent 5907d55ec1
commit c32483a38a
9 changed files with 145 additions and 166 deletions

View File

@ -4815,6 +4815,13 @@ function graph_nodata_image($options)
$height = $options['height'];
}
$width_style = '';
if (isset($options['width']) === true
&& empty($options['width']) === false
) {
$width_style = 'width:'.$options['width'].'px';
}
if ($options['base64'] === true) {
$dataImg = file_get_contents(
$config['homedir'].'/images/image_problem_area_150.png'
@ -4827,7 +4834,7 @@ function graph_nodata_image($options)
true,
[
'title' => __('No data'),
'style' => 'height:'.$height.'px;',
'style' => 'height:'.$height.'px;'.$width_style,
]
);
}

View File

@ -2371,6 +2371,11 @@ function get_bars_module_data($id_module, $typeGraph='horizontal')
$values_to_return = [];
foreach ($values as $val) {
$data = explode(',', $val);
if ($data[0] === $val) {
continue;
}
$values_to_return['labels'][] = io_safe_output($data[0]);
if ($typeGraph === 'horizontal') {
$values_to_return['data'][] = [
@ -2839,74 +2844,23 @@ function get_donut_module_data($id_module)
$no_data_to_show = true;
}
$colors = [];
$colors[] = '#aa3333';
$colors[] = '#045FB4';
$colors[] = '#8181F7';
$colors[] = '#F78181';
$colors[] = '#D0A9F5';
$colors[] = '#BDBDBD';
$colors[] = '#6AB277';
$max_elements = 6;
$values_to_return = [];
$index = 0;
$total = 0;
foreach ($values as $val) {
if ($index < $max_elements) {
$data = explode(',', $val);
$data = explode(',', $val);
if ($no_data_to_show) {
$values_to_return[$index]['tag_name'] = $data[0];
} else {
$values_to_return[$index]['tag_name'] = $data[0].': '.$data[1];
}
if ($data[0] === $val) {
continue;
}
$values_to_return[$index]['color'] = $colors[$index];
$values_to_return[$index]['value'] = (int) $data[1];
$total += (int) $data[1];
$index++;
if ($no_data_to_show) {
$values_to_return['labels'][] = $data[0];
} else {
$data = explode(',', $val);
$values_to_return[$index]['tag_name'] = __('Others').': '.$data[1];
$values_to_return[$index]['color'] = $colors[$index];
$values_to_return[$index]['value'] += (int) $data[1];
$total += (int) $data[1];
}
}
foreach ($values_to_return as $ind => $donut_data) {
$values_to_return[$ind]['percent'] = (($donut_data['value'] * 100) / $total);
}
// sort array
$new_values_to_return = [];
while (!empty($values_to_return)) {
$first = true;
$max_elem = 0;
$max_elem_array = [];
$index_to_del = 0;
foreach ($values_to_return as $i => $val) {
if ($first) {
$max_elem = $val['value'];
$max_elem_array = $val;
$index_to_del = $i;
$first = false;
} else {
if ($val['value'] > $max_elem) {
$max_elem = $val['value'];
$max_elem_array = $val;
$index_to_del = $i;
}
}
$values_to_return['labels'][] = $data[0].': '.$data[1];
}
$new_values_to_return[] = $max_elem_array;
unset($values_to_return[$index_to_del]);
$values_to_return['data'][] = (int) $data[1];
}
$values_to_return = $new_values_to_return;
return $values_to_return;
}

View File

@ -461,6 +461,12 @@ function ring_graph(
global $config;
if (empty($chart_data) === true) {
if (isset($options['ttl']) === true
&& (int) $options['ttl'] === 2
) {
$options['base64'] = true;
}
return graph_nodata_image($options);
}

View File

@ -241,82 +241,89 @@ final class BarsGraph extends Item
}
}
$width = (int) $data['width'];
$height = (int) $data['height'];
$moduleData = \get_bars_module_data($moduleId, $typeGraph);
if ($moduleData !== false && is_array($moduleData) === true) {
array_pop($moduleData['labels']);
array_pop($moduleData['data']);
}
$waterMark = [
'file' => $config['homedir'].'/images/logo_vertical_water.png',
'url' => \ui_get_full_url(
'images/logo_vertical_water.png',
false,
false,
false
),
];
if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
$width = 400;
$height = 400;
} else {
$width = (int) $data['width'];
$height = (int) $data['height'];
}
if (empty($moduleData) === true) {
$image = ui_get_full_url(
'images/image_problem_area.png',
false,
false,
false
);
$rc = file_get_contents($image);
if ($rc !== false) {
$graph = base64_encode($rc);
} else {
$graph = graph_nodata_image(['height' => $height]);
}
$graph = graph_nodata_image(['width' => $width, 'height' => $height]);
} else {
$size = $config['font_size'];
if ($ratio != 0) {
$size = ($config['font_size'] * $ratio);
}
array_pop($moduleData['labels']);
array_pop($moduleData['data']);
$options = [
'width' => $width,
'height' => $height,
'waterMark' => $waterMark,
'legend' => ['display' => false],
'scales' => [
'x' => [
'grid' => [
'display' => true,
'color' => $gridColor,
],
'ticks' => [
'fonts' => ['size' => $size],
],
],
'y' => [
'grid' => [
'display' => true,
'color' => $gridColor,
],
'ticks' => [
'fonts' => ['size' => $size],
],
],
],
'labels' => $moduleData['labels'],
$waterMark = [
'file' => $config['homedir'].'/images/logo_vertical_water.png',
'url' => \ui_get_full_url(
'images/logo_vertical_water.png',
false,
false,
false
),
];
if ($typeGraph === 'horizontal') {
$options['axis'] = 'y';
if ((int) $data['width'] === 0 || (int) $data['height'] === 0) {
$width = 400;
$height = 400;
} else {
$width = (int) $data['width'];
$height = (int) $data['height'];
}
$graph = vbar_graph($moduleData['data'], $options);
if (empty($moduleData) === true) {
$image = ui_get_full_url(
'images/image_problem_area.png',
false,
false,
false
);
$rc = file_get_contents($image);
if ($rc !== false) {
$graph = base64_encode($rc);
} else {
$graph = graph_nodata_image(['height' => $height]);
}
} else {
$size = $config['font_size'];
if ($ratio != 0) {
$size = ($config['font_size'] * $ratio);
}
$options = [
'width' => $width,
'height' => $height,
'waterMark' => $waterMark,
'legend' => ['display' => false],
'scales' => [
'x' => [
'grid' => [
'display' => true,
'color' => $gridColor,
],
'ticks' => [
'fonts' => ['size' => $size],
],
],
'y' => [
'grid' => [
'display' => true,
'color' => $gridColor,
],
'ticks' => [
'fonts' => ['size' => $size],
],
],
],
'labels' => $moduleData['labels'],
];
if ($typeGraph === 'horizontal') {
$options['axis'] = 'y';
}
$graph = '<div style="background-color:'.$backGroundColor.'">';
$graph .= vbar_graph($moduleData['data'], $options);
$graph .= '</div>';
}
}
// Restore connection.

View File

@ -72,7 +72,7 @@ final class DonutGraph extends Item
'border_color',
]
),
'#000000'
'#ffffff'
);
}
@ -103,13 +103,11 @@ final class DonutGraph extends Item
// Load side libraries.
global $config;
include_once $config['homedir'].'/include/functions_visual_map.php';
include_once $config['homedir'].'/include/graphs/functions_d3.php';
if (is_metaconsole()) {
\enterprise_include_once('include/functions_metaconsole.php');
}
// Extract needed properties.
$legendBackGroundColor = static::extractLegendBackgroundColor($data);
// Get the linked agent and module Ids.
$linkedModule = static::extractLinkedModule($data);
$agentId = $linkedModule['agentId'];
@ -158,32 +156,27 @@ final class DonutGraph extends Item
if ($isString === true) {
$graphData = \get_donut_module_data($moduleId);
if (empty($graphData) || $graphData === null) {
$aux = [];
$aux[0]['tag_name'] = 'No data to show';
$aux[0]['color'] = '#aa3333';
$aux[0]['value'] = 1;
$aux[0]['percent'] = 100;
$graphData = $aux;
}
$data['html'] = \d3_donut_graph(
(int) $data['id'],
$width,
$height,
$graphData,
$legendBackGroundColor
);
if (empty($graphData) === true) {
$data['html'] = graph_nodata_image(['width' => $width, 'height' => $height]);
} else {
array_pop($graphData['labels']);
array_pop($graphData['data']);
$options = [
'waterMark' => false,
'legend' => [
'display' => true,
'position' => 'right',
'align' => 'center',
],
'labels' => $graphData['labels'],
];
$data['html'] = \ring_graph($graphData['data'], $options);
}
} else {
$src = 'images/console/signes/wrong_donut_graph.png';
if (\is_metaconsole() === true) {
$src = '../../'.$src;
}
$src = ui_get_full_url($src);
$style = 'width:'.$width.'px; height:'.$height.'px;';
$data['html'] = '<img src="'.$src.'" style="'.$style.'">';
$data['html'] = graph_nodata_image(['width' => $width, 'height' => $height]);
}
// Restore connection.
@ -255,12 +248,12 @@ final class DonutGraph extends Item
// Resume data color.
$inputs[] = [
'label' => __('Resume data color'),
'label' => __('Background color'),
'arguments' => [
'wrapper' => 'div',
'name' => 'legendBackgroundColor',
'type' => 'color',
'value' => $values['legendBackgroundColor'],
'value' => (($values['legendBackgroundColor']) ?? '#ffffff'),
'return' => true,
],
];

View File

@ -450,7 +450,8 @@ class View extends \HTML
$data['metaconsoleId'] = \get_parameter('metaconsoleId');
$data['moduleId'] = \get_parameter('moduleId');
$data['legendBackgroundColor'] = \get_parameter(
'legendBackgroundColor'
'legendBackgroundColor',
'#ffffff'
);
break;

File diff suppressed because one or more lines are too long

File diff suppressed because one or more lines are too long

View File

@ -43,7 +43,7 @@ export function donutGraphPropsDecoder(
? data.html
: decodeBase64(data.encodedHtml),
legendBackgroundColor: stringIsEmpty(data.legendBackgroundColor)
? "#000000"
? "#ffffff"
: data.legendBackgroundColor,
...modulePropsDecoder(data), // Object spread. It will merge the properties of the two objects.
...linkedVCPropsDecoder(data) // Object spread. It will merge the properties of the two objects.
@ -55,6 +55,7 @@ export default class DonutGraph extends Item<DonutGraphProps> {
const element = document.createElement("div");
element.className = "donut-graph";
element.innerHTML = this.props.html;
element.style.backgroundColor = this.props.legendBackgroundColor;
if (
this.props.agentDisabled === true ||
@ -66,9 +67,13 @@ export default class DonutGraph extends Item<DonutGraphProps> {
// Hack to execute the JS after the HTML is added to the DOM.
const scripts = element.getElementsByTagName("script");
for (let i = 0; i < scripts.length; i++) {
setTimeout(() => {
if (scripts[i].src.length === 0) eval(scripts[i].innerHTML.trim());
}, 0);
if (scripts[i].src.length === 0) {
setTimeout(() => {
try {
eval(scripts[i].innerHTML.trim());
} catch (ignored) {} // eslint-disable-line no-empty
}, 0);
}
}
return element;
@ -76,11 +81,17 @@ export default class DonutGraph extends Item<DonutGraphProps> {
protected updateDomElement(element: HTMLElement): void {
element.innerHTML = this.props.html;
element.style.backgroundColor = this.props.legendBackgroundColor;
if (
this.props.agentDisabled === true ||
this.props.moduleDisabled === true
) {
element.style.opacity = "0.2";
}
// Hack to execute the JS after the HTML is added to the DOM.
const aux = document.createElement("div");
aux.innerHTML = this.props.html;
const scripts = aux.getElementsByTagName("script");
const scripts = element.getElementsByTagName("script");
for (let i = 0; i < scripts.length; i++) {
if (scripts[i].src.length === 0) {
eval(scripts[i].innerHTML.trim());