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