Merge branch 'ent-11059-mejora-visual-en-widget-top-n-eventos' into 'develop'

Ent 11059 Mejora visual en widget Top-N Eventos

See merge request artica/pandorafms!6169

pandora_console/include/graphs/fgraph.php

@@ -691,6 +691,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;

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) {
@@ -473,6 +488,7 @@ class TopNEventByGroupWidget extends Widget
             } else {
                 $data_pie = [];
                 $labels = [];
+                $sum = 0;
                 foreach ($result as $row) {
                     if ($row['id_agente'] == 0) {
                         $name = __('System');
@@ -494,7 +510,7 @@ class TopNEventByGroupWidget extends Widget
                     }
 
                     $name .= ' ('.$row['count'].')';
-
+                    $sum += $row['count'];
                     $labels[] = io_safe_output($name);
                     $data_pie[] = $row['count'];
                 }
@@ -524,17 +540,37 @@ class TopNEventByGroupWidget extends Widget
                 break;
             }
 
-            $output .= pie_graph(
+            if ($show_total_data === true) {
-                $data_pie,
+                $output .= ring_graph(
-                [
+                    $data_pie,
-                    'legend' => [
+                    [
-                        'display'  => true,
+                        'legend'   => [
-                        'position' => 'right',
+                            'display'  => true,
-                        'align'    => 'center',
+                            'position' => 'right',
-                    ],
+                            'align'    => 'center',
-                    'labels' => $labels,
+                        ],
-                ]
+                        'elements' => [
-            );
+                            'center' => [
+                                'text'  => $sum,
+                                'color' => '#2c3e50',
+                            ],
+                        ],
+                        'labels'   => $labels,
+                    ]
+                );
+            } else {
+                $output .= pie_graph(
+                    $data_pie,
+                    [
+                        'legend' => [
+                            'display'  => true,
+                            'position' => 'right',
+                            'align'    => 'center',
+                        ],
+                        'labels' => $labels,
+                    ]
+                );
+            }
         }
 
         return $output;

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
      */

pandora_console/vendor/artica/phpchartjs/src/Options/Elements/Center.php

@@ -0,0 +1,85 @@
+<?php
+
+namespace Artica\PHPChartJS\Options\Elements;
+
+use Artica\PHPChartJS\ArraySerializableInterface;
+use Artica\PHPChartJS\Delegate\ArraySerializable;
+use JsonSerializable;
+
+/**
+ * Class Center
+ * @package Artica\PHPChartJS\Options\Elements
+ */
+class Center implements ArraySerializableInterface, JsonSerializable
+{
+    use ArraySerializable;
+
+    /**
+     * Text center graph.
+     * @var string
+     */
+    private $text;
+
+    /**
+     * Color text.
+     * @default '#000'
+     * @var string
+     */
+    private $color;
+
+    /**
+     * Get text center graph.
+     *
+     * @return  string
+     */
+    public function getText()
+    {
+        return $this->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();
+    }
+}

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 = (93/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().'";