|
1
|
|
|
<?php |
|
2
|
|
|
|
|
3
|
|
|
/* |
|
4
|
|
|
* This file is part of the 2amigos/yii2-chartjs-widget project. |
|
5
|
|
|
* (c) 2amigOS! <http://2amigos.us/> |
|
6
|
|
|
* For the full copyright and license information, please view |
|
7
|
|
|
* the LICENSE file that was distributed with this source code. |
|
8
|
|
|
*/ |
|
9
|
|
|
|
|
10
|
|
|
namespace dosamigos\chartjs; |
|
11
|
|
|
|
|
12
|
|
|
use yii\base\InvalidConfigException; |
|
13
|
|
|
use yii\base\Widget; |
|
14
|
|
|
use yii\helpers\Html; |
|
15
|
|
|
use yii\helpers\Json; |
|
16
|
|
|
use yii\web\JsExpression; |
|
17
|
|
|
|
|
18
|
|
|
/** |
|
19
|
|
|
* |
|
20
|
|
|
* Chart renders a canvas ChartJs plugin widget. |
|
21
|
|
|
*/ |
|
22
|
|
|
class ChartJs extends Widget |
|
23
|
|
|
{ |
|
24
|
|
|
/** |
|
25
|
|
|
* @var array the HTML attributes for the widget container tag. |
|
26
|
|
|
*/ |
|
27
|
|
|
public $options = []; |
|
28
|
|
|
/** |
|
29
|
|
|
* @var array the options for the underlying ChartJs JS plugin. |
|
30
|
|
|
* Please refer to the corresponding ChartJs type plugin Web page for possible options. |
|
31
|
|
|
* For example, [this page](http://www.chartjs.org/docs/#lineChart) shows |
|
32
|
|
|
* how to use the "Line chart" plugin. |
|
33
|
|
|
*/ |
|
34
|
|
|
public $clientOptions = []; |
|
35
|
|
|
/** |
|
36
|
|
|
* @var array the datasets configuration options and data to display on the chart. |
|
37
|
|
|
* See [its documentation](http://www.chartjs.org/docs/) for the different options. |
|
38
|
|
|
*/ |
|
39
|
|
|
public $data = []; |
|
40
|
|
|
/** |
|
41
|
|
|
* @var string the type of chart to display. The possible options are: |
|
42
|
|
|
* - "Line" : A line chart is a way of plotting data points on a line. Often, it is used to show trend data, and the |
|
43
|
|
|
* comparison of two data sets. |
|
44
|
|
|
* - "Bar" : A bar chart is a way of showing data as bars. It is sometimes used to show trend data, and the |
|
45
|
|
|
* comparison of multiple data sets side by side. |
|
46
|
|
|
* - "Radar" : A radar chart is a way of showing multiple data points and the variation between them. They are often |
|
47
|
|
|
* useful for comparing the points of two or more different data sets |
|
48
|
|
|
* - "PolarArea" : Polar area charts are similar to pie charts, but each segment has the same angle - the radius of |
|
49
|
|
|
* the segment differs depending on the value. This type of chart is often useful when we want to show a comparison |
|
50
|
|
|
* data similar to a pie chart, but also show a scale of values for context. |
|
51
|
|
|
* - "Pie" : Pie charts are probably the most commonly used chart there are. They are divided into segments, the arc |
|
52
|
|
|
* of each segment shows a the proportional value of each piece of data. |
|
53
|
|
|
* - "Doughnut" : Doughnut charts are similar to pie charts, however they have the centre cut out, and are therefore |
|
54
|
|
|
* shaped more like a doughnut than a pie! |
|
55
|
|
|
*/ |
|
56
|
|
|
public $type; |
|
57
|
|
|
/** |
|
58
|
|
|
* @var array the plugin objects allowing to assign custom callback functions to Chart events. |
|
59
|
|
|
* See [plugins & events documentation] |
|
60
|
|
|
* (http://www.chartjs.org/docs/latest/developers/plugins.html#plugin-core-api). |
|
61
|
|
|
*/ |
|
62
|
|
|
public $plugins = []; |
|
63
|
|
|
|
|
64
|
|
|
/** |
|
65
|
|
|
* Initializes the widget. |
|
66
|
|
|
* This method will register the bootstrap asset bundle. If you override this method, |
|
67
|
|
|
* make sure you call the parent implementation first. |
|
68
|
|
|
* @throws InvalidConfigException |
|
69
|
|
|
*/ |
|
70
|
3 |
|
public function init() |
|
71
|
|
|
{ |
|
72
|
3 |
|
parent::init(); |
|
73
|
3 |
|
if ($this->type === null) { |
|
74
|
1 |
|
throw new InvalidConfigException("The 'type' option is required"); |
|
75
|
|
|
} |
|
76
|
2 |
|
if (!isset($this->options['id'])) { |
|
77
|
2 |
|
$this->options['id'] = $this->getId(); |
|
78
|
2 |
|
} |
|
79
|
2 |
|
} |
|
80
|
|
|
|
|
81
|
|
|
/** |
|
82
|
|
|
* Renders the widget. |
|
83
|
|
|
*/ |
|
84
|
1 |
|
public function run() |
|
85
|
|
|
{ |
|
86
|
1 |
|
echo Html::tag('canvas', '', $this->options); |
|
87
|
1 |
|
$this->registerClientScript(); |
|
88
|
1 |
|
} |
|
89
|
|
|
|
|
90
|
|
|
/** |
|
91
|
|
|
* Registers the required js files and script to initialize ChartJS plugin |
|
92
|
|
|
*/ |
|
93
|
1 |
|
protected function registerClientScript(): void |
|
94
|
|
|
{ |
|
95
|
1 |
|
$id = $this->options['id']; |
|
96
|
1 |
|
$view = $this->getView(); |
|
97
|
1 |
|
ChartJsAsset::register($view); |
|
98
|
|
|
|
|
99
|
1 |
|
$config = Json::encode( |
|
100
|
|
|
[ |
|
101
|
1 |
|
'type' => $this->type, |
|
102
|
1 |
|
'data' => $this->data ?: new JsExpression('{}'), |
|
103
|
1 |
|
'options' => $this->clientOptions ?: new JsExpression('{}'), |
|
104
|
1 |
|
'plugins' => $this->plugins |
|
105
|
1 |
|
] |
|
106
|
1 |
|
); |
|
107
|
|
|
|
|
108
|
1 |
|
$js = ";var chartJS_{$id} = new Chart($('#{$id}'),{$config});"; |
|
109
|
1 |
|
$view->registerJs($js); |
|
110
|
1 |
|
} |
|
111
|
|
|
} |
|
112
|
|
|
|