PluginProbe
wpDataTables – WordPress Data Table, Dynamic Tables & Table Charts Plugin / 6.5.1.7
wpDataTables – WordPress Data Table, Dynamic Tables & Table Charts Plugin v6.5.1.7
6.5.1.7 6.5.1.6 6.5.1.5 6.5.1.4 6.5.1.3 6.5.1.2 6.5.1.1 6.5.0.9 6.5.0.8 6.5.0.7 6.5.0.6 trunk 3.4.2.40 3.4.2.41 3.4.2.42 3.4.2.43 3.4.2.44 3.4.2.45 3.4.2.46 3.4.2.47 3.4.2.48 3.4.2.49 3.4.2.50 6.3.2 6.3.3.1 All 47 releases
wpdatatables / source / class.chartjs.wpdatachart.php

class.chartjs.wpdatachart.php in wpDataTables – WordPress Data Table, Dynamic Tables & Table Charts Plugin 6.5.1.7, at source/class.chartjs.wpdatachart.php

922 lines 40.8 KB
No matching file
Up and down to move Enter to open Esc to close
Raw Download Zip
1 <?php
2
3 namespace WdtChartjsChart;
4
5 use WDTException;
6 use WDTTools;
7 use WPDataChart;
8
9 class WdtChartjsChart extends WPDataChart
10 {
11 //Chart
12 protected $_border_width = 0;
13 protected $_border_color = '#4572A7';
14 protected $_border_radius = 0;
15 protected $_font_size = NULL;
16 protected $_font_name = 'Arial';
17 protected $_font_weight = 'bold';
18 protected $_title_font_weight = 'bold';
19 protected $_font_style = 'normal';
20 protected $_font_color = '#666';
21
22 //Series
23 protected $_curve_type = 'none';
24
25 //Title
26 protected $_title_position = 'top';
27 protected $_title_font_name = 'Arial';
28 protected $_title_font_style = 'bold';
29 protected $_title_font_color = '#666';
30
31 //Tooltip
32 protected $_tooltip_background_color = 'rgba(255, 255, 255, 0.85)';
33 protected $_tooltip_border_radius = 3;
34 protected $_tooltip_shared = false;
35
36 //Legend
37 protected $_show_legend = true;
38 protected $_legend_position_cjs = 'top';
39
40 //Render data
41 protected $_chartjs_render_data = NULL;
42
43 /**
44 * @return int
45 */
46 public function getBorderWidth()
47 {
48 return $this->_border_width;
49 }
50
51 /**
52 * @param int $border_width
53 */
54 public function setBorderWidth($border_width)
55 {
56 $this->_border_width = $border_width;
57 }
58
59 /**
60 * @return string
61 */
62 public function getBorderColor()
63 {
64 return $this->_border_color;
65 }
66
67 /**
68 * @param string $border_color
69 */
70 public function setBorderColor($border_color)
71 {
72 $this->_border_color = $border_color;
73 }
74
75 /**
76 * @return int
77 */
78 public function getBorderRadius()
79 {
80 return $this->_border_radius;
81 }
82
83 /**
84 * @param int $border_radius
85 */
86 public function setBorderRadius($border_radius)
87 {
88 $this->_border_radius = $border_radius;
89 }
90
91 /**
92 * @return null
93 */
94 public function getFontSize()
95 {
96 return $this->_font_size;
97 }
98
99 /**
100 * @param null $font_size
101 */
102 public function setFontSize($font_size)
103 {
104 $this->_font_size = $font_size;
105 }
106
107 /**
108 * @return string
109 */
110 public function getFontName()
111 {
112 return $this->_font_name;
113 }
114
115 /**
116 * @param string $font_name
117 */
118 public function setFontName($font_name)
119 {
120 $this->_font_name = $font_name;
121 }
122
123 /**
124 * @return string
125 */
126 public function getFontWeight()
127 {
128 return $this->_font_weight;
129 }
130
131 /**
132 * @param string $font_weight
133 */
134 public function setFontWeight($font_weight)
135 {
136 $this->_font_weight = $font_weight;
137 }
138
139
140 /**
141 * @return string
142 */
143 public function getTitleFontColor()
144 {
145 return $this->_title_font_color;
146 }
147
148 /**
149 * @param string $title_font_color
150 */
151 public function setTitleFontColor($title_font_color)
152 {
153 $this->_title_font_color = $title_font_color;
154 }
155
156 /**
157 * @return string
158 */
159 public function getFontStyle()
160 {
161 return $this->_font_style;
162 }
163
164 /**
165 * @param string $font_style
166 */
167 public function setFontStyle($font_style)
168 {
169 $this->_font_style = $font_style;
170 }
171
172 /**
173 * @return string
174 */
175 public function getFontColor()
176 {
177 return $this->_font_color;
178 }
179
180 /**
181 * @param string $font_color
182 */
183 public function setFontColor($font_color)
184 {
185 $this->_font_color = $font_color;
186 }
187
188 /**
189 * @return string
190 */
191 public function getRealFontStyle()
192 {
193 if (isset($this->_chartjs_render_data['options']['globalOptions']['defaultFontStyle'])) {
194 $oldFontStyle = $this->_chartjs_render_data['options']['globalOptions']['defaultFontStyle'];
195 if (strpos($oldFontStyle, 'bold italic') !== false ||
196 strpos($oldFontStyle, 'italic') !== false
197 ) {
198 return 'italic';
199 }
200
201 if (strpos($oldFontStyle, 'bold') !== false) {
202 return 'normal';
203 }
204 }
205
206 return $this->getFontStyle();
207 }
208
209 /**
210 * @return string
211 */
212 public function getRealFontWeight()
213 {
214 if (isset($this->_chartjs_render_data['options']['globalOptions']['defaultFontStyle'])) {
215 $oldFontStyle = $this->_chartjs_render_data['options']['globalOptions']['defaultFontStyle'];
216 if (strpos($oldFontStyle, 'bold italic') !== false ||
217 strpos($oldFontStyle, 'bold') !== false
218 ) {
219 return 'bold';
220 }
221
222 if (strpos($oldFontStyle, 'italic') !== false) {
223 return 'normal';
224 }
225 }
226
227 return $this->getFontWeight();
228 }
229
230 /**
231 * @return string
232 */
233 public function getRealTitleFontStyle()
234 {
235 if (isset($this->_chartjs_render_data['options']['options']['title'])) {
236 $oldTitleFontStyle = $this->_chartjs_render_data['options']['options']['title']['fontStyle'];
237 if (strpos($oldTitleFontStyle, 'bold italic') !== false ||
238 strpos($oldTitleFontStyle, 'italic') !== false
239 ) {
240 return 'italic';
241 }
242
243 if (strpos($oldTitleFontStyle, 'bold') !== false ||
244 strpos($oldTitleFontStyle, 'normal') !== false
245 ) {
246 return 'normal';
247 }
248 }
249
250 return $this->getTitleFontStyle();
251 }
252
253 /**
254 * @return string
255 */
256 public function getRealTitleFontWeight()
257 {
258 if (isset($this->_chartjs_render_data['options']['options']['title'])) {
259 $oldTitleFontStyle = $this->_chartjs_render_data['options']['options']['title']['fontStyle'];
260 if (strpos($oldTitleFontStyle, 'bold italic') !== false ||
261 strpos($oldTitleFontStyle, 'bold') !== false
262 ) {
263 return 'bold';
264 }
265
266 if (strpos($oldTitleFontStyle, 'italic') !== false ||
267 strpos($oldTitleFontStyle, 'normal') !== false
268 ) {
269 return 'normal';
270 }
271 }
272
273 return $this->getTitleFontWeight();
274 }
275
276 /**
277 * @return string
278 */
279 public function getCurveType()
280 {
281 return $this->_curve_type;
282 }
283
284 /**
285 * @param string $curve_type
286 */
287 public function setCurveType($curve_type)
288 {
289 $this->_curve_type = $curve_type;
290 }
291
292 /**
293 * @return string
294 */
295 public function getTitlePosition()
296 {
297 return $this->_title_position;
298 }
299
300 /**
301 * @param string $title_position
302 */
303 public function setTitlePosition($title_position)
304 {
305 $this->_title_position = $title_position;
306 }
307
308 /**
309 * @return string
310 */
311 public function getTitleFontName()
312 {
313 return $this->_title_font_name;
314 }
315
316 /**
317 * @param string $title_font_name
318 */
319 public function setTitleFontName($title_font_name)
320 {
321 $this->_title_font_name = $title_font_name;
322 }
323
324 /**
325 * @return string
326 */
327 public function getTitleFontStyle()
328 {
329 return $this->_title_font_style;
330 }
331
332 /**
333 * @param string $title_font_style
334 */
335 public function setTitleFontStyle($title_font_style)
336 {
337 $this->_title_font_style = $title_font_style;
338 }
339
340 /**
341 * @return string
342 */
343 public function getTitleFontWeight()
344 {
345 return $this->_title_font_weight;
346 }
347
348 /**
349 * @param string $title_font_weight
350 */
351 public function setTitleFontWeight($title_font_weight)
352 {
353 $this->_title_font_weight = $title_font_weight;
354 }
355
356 /**
357 * @return string
358 */
359 public function getTooltipBackgroundColor()
360 {
361 return $this->_tooltip_background_color;
362 }
363
364 /**
365 * @param string $tooltip_background_color
366 */
367 public function setTooltipBackgroundColor($tooltip_background_color)
368 {
369 $this->_tooltip_background_color = $tooltip_background_color;
370 }
371
372 /**
373 * @return int
374 */
375 public function getTooltipBorderRadius()
376 {
377 return $this->_tooltip_border_radius;
378 }
379
380 /**
381 * @param int $tooltip_border_radius
382 */
383 public function setTooltipBorderRadius($tooltip_border_radius)
384 {
385 $this->_tooltip_border_radius = $tooltip_border_radius;
386 }
387
388 /**
389 * @return bool
390 */
391 public function isTooltipShared()
392 {
393 return $this->_tooltip_shared;
394 }
395
396 /**
397 * @param bool $tooltip_shared
398 */
399 public function setTooltipShared($tooltip_shared)
400 {
401 $this->_tooltip_shared = $tooltip_shared;
402 }
403
404 /**
405 * @return bool
406 */
407 public function isShowLegend()
408 {
409 return $this->_show_legend;
410 }
411
412 /**
413 * @param bool $show_legend
414 */
415 public function setShowLegend($show_legend)
416 {
417 $this->_show_legend = $show_legend;
418 }
419
420 /**
421 * @return string
422 */
423 public function getLegendPosition()
424 {
425 return $this->_legend_position_cjs;
426 }
427
428 /**
429 * @param string $legend_position_cjs
430 */
431 public function setLegendPosition($legend_position_cjs)
432 {
433 $this->_legend_position_cjs = $legend_position_cjs;
434 }
435
436
437 /**
438 * WPDT Chart.js constructor.
439 *
440 * @param array $constructedChartData
441 * @param bool $loadFromDB
442 * @throws WDTException
443 */
444 public function __construct(array $constructedChartData, $loadFromDB = false)
445 {
446 if ($loadFromDB) {
447 if (isset($constructedChartData['id'])) {
448 $this->setId((int)$constructedChartData['id']);
449 }
450 $this->loadFromDB();
451 } else {
452 parent::__construct($constructedChartData, $loadFromDB);
453
454 $this->setEngine('chartjs');
455
456 // Chart
457 $this->setBorderWidth((int)WDTTools::defineDefaultValue($constructedChartData, 'border_width', 0));
458 $this->setBorderColor(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'border_color', '#FFFFFF')));
459 $this->setBorderRadius((int)WDTTools::defineDefaultValue($constructedChartData, 'border_radius', 0));
460 $this->setFontSize(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'font_size', null)));
461 $this->setFontName(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'font_name', 'Arial')));
462 $this->setFontStyle(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'font_style', 'normal')));
463 $this->setFontWeight(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'font_weight', 'bold')));
464 $this->setFontColor(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'font_color', '#666')));
465
466 //Series
467 $this->setCurveType(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'curve_type', 'none')));
468
469 // Axes
470 $this->setShowGrid((bool)(WDTTools::defineDefaultValue($constructedChartData, 'show_grid', true)));
471 $this->setMajorAxisLabel(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'horizontal_axis_label')));
472 $this->setMinorAxisLabel(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'vertical_axis_label')));
473 $this->setVerticalAxisMin(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'vertical_axis_min')));
474 $this->setVerticalAxisMax(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'vertical_axis_max')));
475
476 // Title
477 $this->setShowTitle((bool)(WDTTools::defineDefaultValue($constructedChartData, 'show_title', true)));
478 $this->setTitlePosition(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'title_position', 'top')));
479 $this->setTitleFontName(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'title_font_name', 'Arial')));
480 $this->setTitleFontStyle(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'title_font_style', 'normal')));
481 $this->setTitleFontWeight(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'title_font_weight', 'bold')));
482 $this->setTitleFontColor(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'title_font_color', '#666')));
483
484 // Tooltip
485 $this->setTooltipBackgroundColor(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'tooltip_background_color', 'rgba(255, 255, 255, 0.85)')));
486 $this->setTooltipBorderRadius(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'tooltip_border_radius', 3)));
487 $this->setTooltipShared((bool)(WDTTools::defineDefaultValue($constructedChartData, 'tooltip_shared', false)));
488
489 // Legend
490 $this->setShowLegend((bool)(WDTTools::defineDefaultValue($constructedChartData, 'show_legend', true)));
491 $this->setLegendPosition(sanitize_text_field(WDTTools::defineDefaultValue($constructedChartData, 'legend_position_cjs', 'right')));
492 }
493
494 }
495
496 /**
497 * @return void
498 */
499 public function prepareRender()
500 {
501
502 $seriesEntry = array();
503
504 $chartToSetOptionBeginAtZero = array(
505 'chartjs_pie_chart',
506 'chartjs_radar_chart',
507 'chartjs_doughnut_chart',
508 'chartjs_polar_area_chart',
509 'chartjs_bubble_chart'
510 );
511
512 $colors = array(
513 '#ff6384',
514 '#36a2eb',
515 '#ffce56',
516 '#4bc0c0',
517 '#9966ff',
518 '#ff9f40',
519 '#a6cee3',
520 '#6a3d9a',
521 '#b15928',
522 '#fb9a99',
523 '#0476e8',
524 '#49C172',
525 '#EA5E57',
526 '#FFF458',
527 '#BFEB54',
528 );
529
530 if ($this->_render_data['series']) {
531 if (!empty($this->_chartjs_render_data['options']['data']['datasets'])) {
532 $this->_chartjs_render_data['options']['data']['datasets'] = array();
533 }
534 if (in_array(
535 $this->_type,
536 array(
537 'chartjs_line_chart',
538 'chartjs_area_chart',
539 'chartjs_stacked_area_chart',
540 'chartjs_column_chart',
541 'chartjs_stacked_column_chart',
542 'chartjs_bar_chart',
543 'chartjs_stacked_bar_chart',
544 'chartjs_radar_chart'
545 )
546 )) {
547 // Series and Categories
548 for ($i = 0; $i < count($this->_render_data['columns']); $i++) {
549 if ($i == 0) {
550 $this->_chartjs_render_data['options']['data']['labels'] = array();
551 } else {
552 $seriesEntry = array(
553 'label' => $this->_render_data['series'][$i - 1]['label'],
554 'orig_header' => $this->_render_data['series'][$i - 1]['orig_header'],
555 'backgroundColor' => isset($this->_render_data['options']['series'][$i - 1]) ?
556 WDTTools::hex2rgba($this->_render_data['options']['series'][$i - 1]['color'], 0.2) : WDTTools::hex2rgba($colors[($i - 1) % 10], 0.2),
557 'borderColor' => isset($this->_render_data['options']['series'][$i - 1]) ?
558 $this->_render_data['options']['series'][$i - 1]['color'] : $colors[($i - 1) % 10],
559 'borderWidth' => 1,
560 'data' => array(),
561 'lineTension' => ($this->getCurveType()) ? 0.4 : 0,
562 'fill' => $this->_type != 'chartjs_line_chart'
563 );
564 }
565 foreach ($this->_render_data['rows'] as $row) {
566 if ($i == 0) {
567 $this->_chartjs_render_data['options']['data']['labels'][] = $row[$i];
568 } else {
569 $seriesEntry['data'][] = $row[$i];
570 }
571 }
572 if ($i != 0) {
573 $this->_chartjs_render_data['options']['data']['datasets'][] = $seriesEntry;
574 }
575 }
576 } else if (in_array(
577 $this->_type,
578 array(
579 'chartjs_polar_area_chart',
580 'chartjs_pie_chart',
581 'chartjs_doughnut_chart'
582 )
583 )) {
584 // Series and Categories
585 for ($i = 0; $i < count($this->_render_data['columns']); $i++) {
586 if ($i == 0) {
587 $this->_chartjs_render_data['options']['data']['labels'] = array();
588 } else {
589 $seriesEntry = array(
590 'label' => $this->_render_data['series'][$i - 1]['label'],
591 'backgroundColor' => isset($this->_render_data['options']['series'][$i - 1]) ?
592 $this->_render_data['options']['series'][$i - 1]['color'] : $colors,
593 'borderWidth' => 1,
594 'data' => array()
595 );
596 }
597 foreach ($this->_render_data['rows'] as $row) {
598 if ($i == 0) {
599 $this->_chartjs_render_data['options']['data']['labels'][] = $row[$i];
600 } else {
601 $seriesEntry['data'][] = $row[$i];
602 }
603 }
604 if ($i != 0) {
605 $this->_chartjs_render_data['options']['data']['datasets'][] = $seriesEntry;
606 }
607 }
608 } else if ($this->_type = 'chartjs_bubble_chart') {
609 // Series and Categories
610 for ($i = 0; $i < 2; $i++) {
611 foreach ($this->_render_data['rows'] as $key => $row) {
612 if ($i == 0) {
613 $this->_chartjs_render_data['options']['data']['datasets'][$key]['label'] = $row[$i];
614 }
615 if ($i == 1) {
616 $seriesEntry = array(
617 'data' => array()
618 );
619 $seriesEntry['backgroundColor'] = $colors[$key % 10];
620 $seriesEntry['hoverBackgroundColor'] = $colors[$key % 10];
621 $seriesEntry['data'][0]['x'] = $row[$i];
622 $seriesEntry['data'][0]['y'] = $row[$i + 1];
623 $seriesEntry['data'][0]['r'] = $row[$i + 2];
624 $this->_chartjs_render_data['options']['data']['datasets'][$key] = array_merge($this->_chartjs_render_data['options']['data']['datasets'][$key], $seriesEntry);
625 }
626 }
627 }
628 }
629 }
630
631 // Column Indexes
632
633
634 // Chart
635 $this->_chartjs_render_data['configurations']['type'] = $this->getType();
636 $this->_chartjs_render_data['configurations']['container']['height'] = $this->getHeight();
637 if ($this->isResponsiveWidth()) {
638 $this->_chartjs_render_data['configurations']['container']['width'] = 0;
639 $this->_chartjs_render_data['options']['options']['maintainAspectRatio'] = true;
640 } else {
641 $this->_chartjs_render_data['configurations']['container']['width'] = $this->getWidth();
642 $this->_chartjs_render_data['options']['options']['maintainAspectRatio'] = false;
643 }
644 $this->_chartjs_render_data['configurations']['canvas']['backgroundColor'] = $this->getBackgroundColor();
645 $this->_chartjs_render_data['configurations']['canvas']['borderWidth'] = $this->getBorderWidth();
646 $this->_chartjs_render_data['configurations']['canvas']['borderColor'] = $this->getBorderColor();
647 $this->_chartjs_render_data['configurations']['canvas']['borderRadius'] = $this->getBorderRadius();
648 $this->_chartjs_render_data['options']['globalOptions']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
649 $this->_chartjs_render_data['options']['globalOptions']['font']['family'] = $this->getFontName();
650 $this->_chartjs_render_data['options']['globalOptions']['font']['style'] = $this->getRealFontStyle();
651 $this->_chartjs_render_data['options']['globalOptions']['font']['weight'] = $this->getRealFontWeight();
652 $this->_chartjs_render_data['options']['globalOptions']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
653
654 // Axes
655 if (!$this->_show_grid) {
656 $this->_chartjs_render_data['options']['options']['scales']['x']['display'] = false;
657 $this->_chartjs_render_data['options']['options']['scales']['y']['display'] = false;
658 }
659 $this->_chartjs_render_data['options']['options']['scales']['x']['title']['display'] = true;
660 $this->_chartjs_render_data['options']['options']['scales']['x']['title']['text'] = $this->getMajorAxisLabel();
661 $this->_chartjs_render_data['options']['options']['scales']['x']['title']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
662 $this->_chartjs_render_data['options']['options']['scales']['x']['title']['font']['weight'] = $this->getRealFontWeight();
663 $this->_chartjs_render_data['options']['options']['scales']['x']['title']['font']['style'] = $this->getRealFontStyle();
664 $this->_chartjs_render_data['options']['options']['scales']['x']['title']['font']['family'] = $this->getFontName();
665 $this->_chartjs_render_data['options']['options']['scales']['x']['title']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
666 $this->_chartjs_render_data['options']['options']['scales']['y']['title']['display'] = true;
667 $this->_chartjs_render_data['options']['options']['scales']['y']['title']['text'] = $this->getMinorAxisLabel();
668 $this->_chartjs_render_data['options']['options']['scales']['y']['title']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
669 $this->_chartjs_render_data['options']['options']['scales']['y']['title']['font']['weight'] = $this->getRealFontWeight();
670 $this->_chartjs_render_data['options']['options']['scales']['y']['title']['font']['style'] = $this->getRealFontStyle();
671 $this->_chartjs_render_data['options']['options']['scales']['y']['title']['font']['family'] = $this->getFontName();
672 $this->_chartjs_render_data['options']['options']['scales']['y']['title']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
673 if ($this->getVerticalAxisMin() != '') {
674 $this->_chartjs_render_data['options']['options']['scales']['y']['min'] = intval($this->getVerticalAxisMin());
675 } else {
676 if (in_array($this->_type, $chartToSetOptionBeginAtZero)) {
677 $this->_chartjs_render_data['options']['options']['scales']['y']['beginAtZero'] = true;
678 $this->_chartjs_render_data['options']['options']['scales']['y']['min'] = 0;
679 } else {
680 $this->_chartjs_render_data['options']['options']['scales']['y']['beginAtZero'] = false;
681 }
682 }
683 $this->_chartjs_render_data['options']['options']['scales']['y']['ticks']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
684 $this->_chartjs_render_data['options']['options']['scales']['y']['ticks']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
685 $this->_chartjs_render_data['options']['options']['scales']['y']['ticks']['font']['weight'] = $this->getRealFontWeight();
686 $this->_chartjs_render_data['options']['options']['scales']['y']['ticks']['font']['style'] = $this->getRealFontStyle();
687 $this->_chartjs_render_data['options']['options']['scales']['y']['ticks']['font']['family'] = $this->getFontName();
688 $this->_chartjs_render_data['options']['options']['scales']['x']['ticks']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
689 $this->_chartjs_render_data['options']['options']['scales']['x']['ticks']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
690 $this->_chartjs_render_data['options']['options']['scales']['x']['ticks']['font']['weight'] = $this->getRealFontWeight();
691 $this->_chartjs_render_data['options']['options']['scales']['x']['ticks']['font']['style'] = $this->getRealFontStyle();
692 $this->_chartjs_render_data['options']['options']['scales']['x']['ticks']['font']['family'] = $this->getFontName();
693 if (in_array($this->_type, array('chartjs_polar_area_chart', 'chartjs_radar_chart'))) {
694 $this->_chartjs_render_data['options']['options']['scales']['r']['ticks']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
695 $this->_chartjs_render_data['options']['options']['scales']['r']['ticks']['font']['weight'] = $this->getRealFontWeight();
696 $this->_chartjs_render_data['options']['options']['scales']['r']['ticks']['font']['style'] = $this->getRealFontStyle();
697 $this->_chartjs_render_data['options']['options']['scales']['r']['ticks']['font']['family'] = $this->getFontName();
698 $this->_chartjs_render_data['options']['options']['scales']['r']['ticks']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
699
700 $this->_chartjs_render_data['options']['options']['scales']['r']['pointLabels']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
701 $this->_chartjs_render_data['options']['options']['scales']['r']['pointLabels']['font']['weight'] = $this->getRealFontWeight();
702 $this->_chartjs_render_data['options']['options']['scales']['r']['pointLabels']['font']['style'] = $this->getRealFontStyle();
703 $this->_chartjs_render_data['options']['options']['scales']['r']['pointLabels']['font']['family'] = $this->getFontName();
704 $this->_chartjs_render_data['options']['options']['scales']['r']['pointLabels']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
705 }
706 if ($this->getVerticalAxisMax() != '') {
707 $this->_chartjs_render_data['options']['options']['scales']['y']['max'] = intval($this->getVerticalAxisMax());
708 }
709
710 // Title
711 if ($this->isShowTitle()) {
712 $this->_chartjs_render_data['options']['options']['plugins']['title']['display'] = true;
713 $this->_chartjs_render_data['options']['options']['plugins']['title']['text'] = $this->getTitle();
714 } else {
715 $this->_chartjs_render_data['options']['options']['plugins']['title']['display'] = false;
716 }
717 $this->_chartjs_render_data['options']['options']['plugins']['title']['position'] = $this->getTitlePosition();
718 $this->_chartjs_render_data['options']['options']['plugins']['title']['font']['family'] = $this->getTitleFontName();
719 $this->_chartjs_render_data['options']['options']['plugins']['title']['font']['weight'] = $this->getRealTitleFontWeight();
720 $this->_chartjs_render_data['options']['options']['plugins']['title']['font']['style'] = $this->getRealTitleFontStyle();
721 $this->_chartjs_render_data['options']['options']['plugins']['title']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
722 $this->_chartjs_render_data['options']['options']['plugins']['title']['color'] = ($this->getTitleFontColor() != '') ? $this->getTitleFontColor() : '#666';
723
724 // Tooltip
725 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['enabled'] = $this->isTooltipEnabled();
726 if ($this->isTooltipShared()) {
727 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['mode'] = 'index';
728 } else {
729 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['mode'] = 'nearest';
730 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['intersect'] = true;
731 }
732 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['backgroundColor'] = strpos($this->getTooltipBackgroundColor(), 'rgba') !== false ? $this->getTooltipBackgroundColor() : WDTTools::hex2rgba($this->getTooltipBackgroundColor(), 0.8);
733 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['cornerRadius'] = $this->getTooltipBorderRadius();
734 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['titleFont']['size'] = 12;
735 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['bodyFont']['size'] = 12;
736 $this->_chartjs_render_data['options']['options']['plugins']['tooltip']['footerFont']['size'] = 12;
737
738 // Legend
739 $this->_chartjs_render_data['options']['options']['plugins']['legend']['display'] = $this->isShowLegend();
740 $this->_chartjs_render_data['options']['options']['plugins']['legend']['position'] = $this->getLegendPosition();
741 $this->_chartjs_render_data['options']['options']['plugins']['legend']['labels']['color'] = $this->getFontColor() == '' ? '#666' : $this->getFontColor();
742 $this->_chartjs_render_data['options']['options']['plugins']['legend']['labels']['font']['size'] = $this->getFontSize() != '' ? (int)$this->getFontSize() : 12;
743 $this->_chartjs_render_data['options']['options']['plugins']['legend']['labels']['font']['weight'] = $this->getRealFontWeight();
744 $this->_chartjs_render_data['options']['options']['plugins']['legend']['labels']['font']['style'] = $this->getRealFontStyle();
745
746 // Compatibility with Chartjs 4.x version for old charts
747 if (isset($this->_chartjs_render_data['options']['options']['title']))
748 unset($this->_chartjs_render_data['options']['options']['title']);
749 if (isset($this->_chartjs_render_data['options']['options']['legend']))
750 unset($this->_chartjs_render_data['options']['options']['legend']);
751 if (isset($this->_chartjs_render_data['options']['options']['tooltips']))
752 unset($this->_chartjs_render_data['options']['options']['tooltips']);
753 if (isset($this->_chartjs_render_data['options']['options']['scales']['xAxes']))
754 unset($this->_chartjs_render_data['options']['options']['scales']['xAxes']);
755 if (isset($this->_chartjs_render_data['options']['options']['scales']['yAxes']))
756 unset($this->_chartjs_render_data['options']['options']['scales']['yAxes']);
757 if (isset($this->_chartjs_render_data['options']['globalOptions']['defaultFontSize']))
758 unset($this->_chartjs_render_data['options']['globalOptions']['defaultFontSize']);
759 if (isset($this->_chartjs_render_data['options']['globalOptions']['defaultFontFamily']))
760 unset($this->_chartjs_render_data['options']['globalOptions']['defaultFontFamily']);
761 if (isset($this->_chartjs_render_data['options']['globalOptions']['defaultFontStyle']))
762 unset($this->_chartjs_render_data['options']['globalOptions']['defaultFontStyle']);
763 if (isset($this->_chartjs_render_data['options']['globalOptions']['defaultFontColor']))
764 unset($this->_chartjs_render_data['options']['globalOptions']['defaultFontColor']);
765 if (isset($this->_chartjs_render_data['options']['globalOptions']['defaultFontColor']))
766 unset($this->_chartjs_render_data['options']['globalOptions']['defaultFontColor']);
767 if (isset($this->_chartjs_render_data['options']['title']['fontFamily']))
768 unset($this->_chartjs_render_data['options']['title']['fontFamily']);
769 if (isset($this->_chartjs_render_data['options']['title']['fontStyle']))
770 unset($this->_chartjs_render_data['options']['title']['fontStyle']);
771 if (isset($this->_chartjs_render_data['options']['title']['fontColor']))
772 unset($this->_chartjs_render_data['options']['title']['fontColor']);
773
774 $this->_chartjs_render_data = apply_filters('wpdatatables_filter_chartjs_render_data', $this->_chartjs_render_data, $this->getId(), $this);
775
776 }
777
778 /**
779 * @param $js_ext
780 * @return false|string
781 */
782 public function enqueueChartSpecificScripts($js_ext)
783 {
784 $this->prepareRender();
785 wp_enqueue_script('wdt-chartjs', WDT_JS_PATH . 'wdtcharts/chartjs/Chart.js', array(), WDT_CURRENT_VERSION);
786 // ChartJS wpDataTable JS library
787 wp_enqueue_script('wpdatatables-chartjs', WDT_JS_PATH . 'wdtcharts/chartjs/wdt.chartJS' . $js_ext, array('jquery'), WDT_CURRENT_VERSION);
788 return json_encode($this->_chartjs_render_data);
789 }
790
791 /**
792 * @param $renderData
793 * @return void
794 */
795 public function setSpecificChartProperties($renderData)
796 {
797 // Chart
798 $this->setBackgroundColor($renderData['chartjs_render_data']['configurations']['canvas']['backgroundColor']);
799 $this->setBorderWidth($renderData['chartjs_render_data']['configurations']['canvas']['borderWidth']);
800 $this->setBorderColor($renderData['chartjs_render_data']['configurations']['canvas']['borderColor']);
801 $this->setBorderRadius($renderData['chartjs_render_data']['configurations']['canvas']['borderRadius']);
802 if (isset($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontSize'])) {
803 $this->setFontSize($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontSize']);
804 } else {
805 $this->setFontSize($renderData['chartjs_render_data']['options']['globalOptions']['font']['size']);
806 }
807 if (isset($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontFamily'])) {
808 $this->setFontName($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontFamily']);
809 } else {
810 $this->setFontName($renderData['chartjs_render_data']['options']['globalOptions']['font']['family']);
811 }
812 if (isset($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontStyle'])) {
813 $this->setFontStyle($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontStyle']);
814 } else {
815 $this->setFontStyle($renderData['chartjs_render_data']['options']['globalOptions']['font']['style']);
816 $this->setFontWeight($renderData['chartjs_render_data']['options']['globalOptions']['font']['weight']);
817 }
818 if (isset($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontColor'])) {
819 $this->setFontColor($renderData['chartjs_render_data']['options']['globalOptions']['defaultFontColor']);
820 } else {
821 $this->setFontColor($renderData['chartjs_render_data']['options']['globalOptions']['color']);
822 }
823 // Series
824 isset($renderData['chartjs_render_data']['options']['data']['datasets'][0]['lineTension']) ?
825 $this->setCurveType($renderData['chartjs_render_data']['options']['data']['datasets'][0]['lineTension']) : null;
826 // Axes
827 if (isset($renderData['chartjs_render_data']['options']['options']['scales']['xAxes'][0]['scaleLabel']['labelString'])) {
828 $this->setMajorAxisLabel($renderData['chartjs_render_data']['options']['options']['scales']['xAxes'][0]['scaleLabel']['labelString']);
829 } else {
830 $this->setMajorAxisLabel($renderData['chartjs_render_data']['options']['options']['scales']['x']['title']['text']);
831 }
832 if (isset($renderData['chartjs_render_data']['options']['options']['scales']['yAxes'][0]['scaleLabel']['labelString'])) {
833 $this->setMinorAxisLabel($renderData['chartjs_render_data']['options']['options']['scales']['yAxes'][0]['scaleLabel']['labelString']);
834 } else {
835 $this->setMinorAxisLabel($renderData['chartjs_render_data']['options']['options']['scales']['y']['title']['text']);
836 }
837 if (isset($renderData['chartjs_render_data']['options']['options']['scales']['yAxes'][0]['ticks']['min']))
838 $this->setVerticalAxisMin($renderData['chartjs_render_data']['options']['options']['scales']['yAxes'][0]['ticks']['min']);
839 if (isset($renderData['chartjs_render_data']['options']['options']['scales']['yAxes'][0]['ticks']['max']))
840 $this->setVerticalAxisMax($renderData['chartjs_render_data']['options']['options']['scales']['yAxes'][0]['ticks']['max']);
841 if (isset($renderData['chartjs_render_data']['options']['options']['scales']['y']['min']))
842 $this->setVerticalAxisMin($renderData['chartjs_render_data']['options']['options']['scales']['y']['min']);
843 if (isset($renderData['chartjs_render_data']['options']['options']['scales']['y']['max']))
844 $this->setVerticalAxisMax($renderData['chartjs_render_data']['options']['options']['scales']['y']['max']);
845
846 if (isset($renderData['chartjs_render_data']['options']['options']['plugins'])) {
847 // Title
848 $this->setTitlePosition($renderData['chartjs_render_data']['options']['options']['plugins']['title']['position']);
849 $this->setTitleFontName($renderData['chartjs_render_data']['options']['options']['plugins']['title']['font']['family']);
850 $this->setTitleFontStyle($renderData['chartjs_render_data']['options']['options']['plugins']['title']['font']['style']);
851 $this->setTitleFontWeight($renderData['chartjs_render_data']['options']['options']['plugins']['title']['font']['weight']);
852 $this->setTitleFontColor($renderData['chartjs_render_data']['options']['options']['plugins']['title']['color']);
853 // Tooltip
854 $this->setTooltipEnabled($renderData['chartjs_render_data']['options']['options']['plugins']['tooltip']['enabled']);
855 if ($renderData['chartjs_render_data']['options']['options']['plugins']['tooltip']['mode'] == 'nearest') {
856 $this->setTooltipShared(false);
857 } else {
858 $this->setTooltipShared(true);
859 }
860 $this->setTooltipBackgroundColor($renderData['chartjs_render_data']['options']['options']['plugins']['tooltip']['backgroundColor']);
861 $this->setTooltipBorderRadius($renderData['chartjs_render_data']['options']['options']['plugins']['tooltip']['cornerRadius']);
862 // Legend
863 $this->setShowLegend($renderData['chartjs_render_data']['options']['options']['plugins']['legend']['display']);
864 $this->setLegendPosition($renderData['chartjs_render_data']['options']['options']['plugins']['legend']['position']);
865 } else {
866 // Title
867 $this->setTitlePosition($renderData['chartjs_render_data']['options']['options']['title']['position']);
868 $this->setTitleFontName($renderData['chartjs_render_data']['options']['options']['title']['fontFamily']);
869 $this->setTitleFontStyle($renderData['chartjs_render_data']['options']['options']['title']['fontStyle']);
870 $this->setTitleFontColor($renderData['chartjs_render_data']['options']['options']['title']['fontColor']);
871 // Tooltip
872 $this->setTooltipEnabled($renderData['chartjs_render_data']['options']['options']['tooltips']['enabled']);
873 if ($renderData['chartjs_render_data']['options']['options']['tooltips']['mode'] == 'single') {
874 $this->setTooltipShared(false);
875 } else {
876 $this->setTooltipShared(true);
877 }
878 $this->setTooltipBackgroundColor($renderData['chartjs_render_data']['options']['options']['tooltips']['backgroundColor']);
879 $this->setTooltipBorderRadius($renderData['chartjs_render_data']['options']['options']['tooltips']['cornerRadius']);
880 // Legend
881 $this->setShowLegend($renderData['chartjs_render_data']['options']['options']['legend']['display']);
882 $this->setLegendPosition($renderData['chartjs_render_data']['options']['options']['legend']['position']);
883 }
884 }
885
886 /**
887 * @return mixed|null
888 */
889 public function returnRenderData()
890 {
891 return $this->_chartjs_render_data;
892 }
893
894 /**
895 * @return array
896 */
897 public function formRenderDataForDb()
898 {
899 return array(
900 'selected_columns' => $this->getSelectedColumns(),
901 'range_type' => $this->getRangeType(),
902 'row_range' => $this->getRowRange(),
903 'render_data' => $this->_render_data,
904 'chartjs_render_data' => $this->_chartjs_render_data,
905 'show_grid' => $this->_show_grid,
906 'show_title' => $this->_show_title,
907 'series_type' => $this->getSeriesType()
908 );
909 }
910
911 /**
912 * @param $chartData
913 * @return mixed|null
914 */
915 public function setChartRenderData($chartData)
916 {
917 if (!empty($renderData['chartjs_render_data'])) {
918 $this->_chartjs_render_data = $renderData['chartjs_render_data'];
919 }
920 return parent::setChartRenderData($chartData);
921 }
922 }