phpchartjs pandora_enterprise#9554
This commit is contained in:
parent
5907d55ec1
commit
c32483a38a
|
@ -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,
|
||||
]
|
||||
);
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
|
||||
|
|
|
@ -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.
|
||||
|
|
|
@ -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,
|
||||
],
|
||||
];
|
||||
|
|
|
@ -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
|
@ -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());
|
||||
|
|
Loading…
Reference in New Issue