#11059 added new property in graphjs for add text in center

This commit is contained in:
Daniel Cebrian 2023-06-22 15:06:16 +02:00
parent a0f1dacfae
commit 66ba29581b
5 changed files with 214 additions and 13 deletions

View File

@ -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;

View File

@ -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;

View File

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

View File

@ -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();
}
}

View File

@ -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().'";