From 66ba29581bfe7f69413f98b53864fbf7c2ca685c Mon Sep 17 00:00:00 2001 From: Daniel Cebrian Date: Thu, 22 Jun 2023 15:06:16 +0200 Subject: [PATCH] #11059 added new property in graphjs for add text in center --- pandora_console/include/graphs/fgraph.php | 11 +++ .../Widgets/top_n_events_by_group.php | 62 +++++++++++--- .../phpchartjs/src/Options/Elements.php | 26 ++++++ .../src/Options/Elements/Center.php | 85 +++++++++++++++++++ .../phpchartjs/src/Renderer/JavaScript.php | 43 ++++++++++ 5 files changed, 214 insertions(+), 13 deletions(-) create mode 100644 pandora_console/vendor/artica/phpchartjs/src/Options/Elements/Center.php diff --git a/pandora_console/include/graphs/fgraph.php b/pandora_console/include/graphs/fgraph.php index db068d2140..447ec9efb3 100644 --- a/pandora_console/include/graphs/fgraph.php +++ b/pandora_console/include/graphs/fgraph.php @@ -649,6 +649,17 @@ function get_build_setup_charts($type, $options, $data) } $chart->options()->setMaintainAspectRatio($maintainAspectRatio); + if (isset($options['elements']) === true) { + if (isset($options['elements']['center']) === true) { + if (isset($options['elements']['center']['text']) === true) { + $chart->options()->getElements()->center()->setText($options['elements']['center']['text']); + } + + if (isset($options['elements']['center']['color']) === true) { + $chart->options()->getElements()->center()->setColor($options['elements']['center']['color']); + } + } + } // Set Responsive for responsive charts. $responsive = true; diff --git a/pandora_console/include/lib/Dashboard/Widgets/top_n_events_by_group.php b/pandora_console/include/lib/Dashboard/Widgets/top_n_events_by_group.php index 8c4fece94e..0a47ea71b8 100644 --- a/pandora_console/include/lib/Dashboard/Widgets/top_n_events_by_group.php +++ b/pandora_console/include/lib/Dashboard/Widgets/top_n_events_by_group.php @@ -226,6 +226,10 @@ class TopNEventByGroupWidget extends Widget $values['legendPosition'] = $decoder['legendPosition']; } + if (isset($decoder['show_total_data']) === true) { + $values['show_total_data'] = $decoder['show_total_data']; + } + return $values; } @@ -329,6 +333,16 @@ class TopNEventByGroupWidget extends Widget ], ]; + $inputs[] = [ + 'label' => __('Show total data'), + 'arguments' => [ + 'type' => 'switch', + 'name' => 'show_total_data', + 'value' => $values['show_total_data'], + 'return' => true, + ], + ]; + return $inputs; } @@ -347,6 +361,7 @@ class TopNEventByGroupWidget extends Widget $values['maxHours'] = \get_parameter('maxHours', 0); $values['groupId'] = \get_parameter('groupId', []); $values['legendPosition'] = \get_parameter('legendPosition', 0); + $values['show_total_data'] = \get_parameter_switch('show_total_data', 0); return $values; } @@ -364,7 +379,7 @@ class TopNEventByGroupWidget extends Widget $output = ''; $size = parent::getSize(); - + $show_total_data = (bool) $this->values['show_total_data']; $this->values['groupId'] = explode(',', $this->values['groupId'][0]); if (empty($this->values['groupId']) === true) { @@ -425,6 +440,7 @@ class TopNEventByGroupWidget extends Widget } else { $data_pie = []; $labels = []; + $sum = 0; foreach ($result as $row) { if ($row['id_agente'] == 0) { $name = __('System'); @@ -444,7 +460,7 @@ class TopNEventByGroupWidget extends Widget } $name .= ' ('.$row['count'].')'; - + $sum += $row['count']; $labels[] = io_safe_output($name); $data_pie[] = $row['count']; } @@ -474,17 +490,37 @@ class TopNEventByGroupWidget extends Widget break; } - $output .= pie_graph( - $data_pie, - [ - 'legend' => [ - 'display' => true, - 'position' => 'right', - 'align' => 'center', - ], - 'labels' => $labels, - ] - ); + if ($show_total_data === true) { + $output .= ring_graph( + $data_pie, + [ + 'legend' => [ + 'display' => true, + 'position' => 'right', + 'align' => 'center', + ], + 'elements' => [ + 'center' => [ + 'text' => '10000', + 'color' => '#2c3e50', + ], + ], + 'labels' => $labels, + ] + ); + } else { + $output .= pie_graph( + $data_pie, + [ + 'legend' => [ + 'display' => true, + 'position' => 'right', + 'align' => 'center', + ], + 'labels' => $labels, + ] + ); + } } return $output; diff --git a/pandora_console/vendor/artica/phpchartjs/src/Options/Elements.php b/pandora_console/vendor/artica/phpchartjs/src/Options/Elements.php index 116fc46758..b63513bc23 100644 --- a/pandora_console/vendor/artica/phpchartjs/src/Options/Elements.php +++ b/pandora_console/vendor/artica/phpchartjs/src/Options/Elements.php @@ -8,6 +8,7 @@ use Artica\PHPChartJS\Options\Elements\Arc; use Artica\PHPChartJS\Options\Elements\Line; use Artica\PHPChartJS\Options\Elements\Point; use Artica\PHPChartJS\Options\Elements\Rectangle; +use Artica\PHPChartJS\Options\Elements\Center; use JsonSerializable; /** @@ -39,6 +40,11 @@ class Elements implements ArraySerializableInterface, JsonSerializable */ private $arc; + /** + * @var Center + */ + private $center; + /** * @return Rectangle */ @@ -119,6 +125,26 @@ class Elements implements ArraySerializableInterface, JsonSerializable return $this->arc; } + /** + * @return Center + */ + public function center() + { + if (is_null($this->center)) { + $this->center = new Center(); + } + + return $this->center; + } + + /** + * @return Center + */ + public function getCenter() + { + return $this->center; + } + /** * @return array */ diff --git a/pandora_console/vendor/artica/phpchartjs/src/Options/Elements/Center.php b/pandora_console/vendor/artica/phpchartjs/src/Options/Elements/Center.php new file mode 100644 index 0000000000..d8b35b4e89 --- /dev/null +++ b/pandora_console/vendor/artica/phpchartjs/src/Options/Elements/Center.php @@ -0,0 +1,85 @@ +text; + } + + /** + * Set text center graph. + * + * @param string $text Text center graph. + * + * @return self + */ + public function setText(string $text) + { + $this->text = $text; + + return $this; + } + + /** + * Get color text. + * + * @return string + */ + public function getColor() + { + return $this->color; + } + + /** + * Set color text. + * + * @param string $color Color text. + * + * @return self + */ + public function setColor(string $color) + { + $this->color = $color; + + return $this; + } + + /** + * @return array + */ + public function jsonSerialize() + { + return $this->getArrayCopy(); + } +} diff --git a/pandora_console/vendor/artica/phpchartjs/src/Renderer/JavaScript.php b/pandora_console/vendor/artica/phpchartjs/src/Renderer/JavaScript.php index 100276743f..b1fcb1bb9f 100644 --- a/pandora_console/vendor/artica/phpchartjs/src/Renderer/JavaScript.php +++ b/pandora_console/vendor/artica/phpchartjs/src/Renderer/JavaScript.php @@ -32,6 +32,49 @@ class JavaScript extends Renderer if (empty($this->chart->defaults()->getWatermark()) === false) { $script[] = 'const chart_watermark_'.$this->chart->getId().' = { id: "chart_watermark_'.$this->chart->getId().'", + beforeDraw: (chart) => { + if (Object.prototype.hasOwnProperty.call(chart, "config") && + Object.prototype.hasOwnProperty.call(chart.config.options, "elements") && + Object.prototype.hasOwnProperty.call(chart.config.options.elements, "center")) + { + var ctx = chart.ctx; + + ctx.save(); + + var centerConfig = chart.config.options.elements.center; + var txt = centerConfig.text; + var color = centerConfig.color || "#000"; + ctx.textAlign = "center"; + ctx.textBaseline = "middle"; + var centerX = (chart.chartArea.left + chart.chartArea.right) / 2; + var centerY = (chart.chartArea.top + chart.chartArea.bottom) / 2; + + var outerRadius = Math.min(ctx.canvas.width, ctx.canvas.height) / 2; + + var padding = 20; + + var innerRadius = outerRadius - padding; + + ctx.font = "30px "; + var sidePaddingCalculated = (92/100) * (innerRadius * 2) + + var stringWidth = ctx.measureText(txt).width; + var elementWidth = (innerRadius * 2) - sidePaddingCalculated; + + var widthRatio = elementWidth / stringWidth; + var newFontSize = Math.floor(30 * widthRatio); + var elementHeight = (innerRadius * 2); + + var fontSizeToUse = Math.min(newFontSize, elementHeight); + + ctx.font = fontSizeToUse + "px Lato, sans-serif"; + ctx.fillStyle = color; + + ctx.fillText(txt, centerX, centerY); + + ctx.restore(); + } + }, afterDraw: (chart) => { const image = new Image(); image.src = "'.$this->chart->defaults()->getWatermark()->getSrc().'";