#11059 added new property in graphjs for add text in center
This commit is contained in:
parent
a0f1dacfae
commit
66ba29581b
|
@ -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;
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
*/
|
||||
|
|
|
@ -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();
|
||||
}
|
||||
}
|
|
@ -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().'";
|
||||
|
|
Loading…
Reference in New Issue