Documentation
Table of Contents
- §³§à§Ù§Õ§Ñ§ß§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ (§â§å§Ü§à§Ó§à§Õ§ã§ä§Ó§à)
- §¹§ä§à §Ó§í §Ò§å§Õ§Ö§ä§Ö §ã§à§Ù§Õ§Ñ§Ó§Ñ§ä§î
- §¹§Ñ§ã§ä§î I - "§±§â§Ú§Ó§Ö§ä, §Þ§Ú§â!"
- §¹§Ñ§ã§ä§î II - §¥§Ú§Ñ§Ô§â§Ñ§Þ§Þ§Ñ §Ú§Ù§Þ§Ö§â§Ö§ß§Ú§Û
- §¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ú §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ß§Ú§Ö §Ú§ç §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§à§Ó
- §±§à§Ý§å§é§Ö§ß§Ú§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§ñ §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §é§Ö§â§Ö§Ù API
- §¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §â§Ñ§ã§ê§Ú§â§Ö§ß§ß§í§ç §ß§Ñ§ã§ä§â§à§Ö§Ü §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú
- §¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö JavaScript §Ó §Ó§Ú§Õ§Ø§Ö§ä
- §¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §ã§ä§Ú§Ý§Ö§Û CSS §Ó §Ó§Ú§Õ§Ø§Ö§ä
§³§à§Ù§Õ§Ñ§ß§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ (§â§å§Ü§à§Ó§à§Õ§ã§ä§Ó§à)
§¿§ä§à §á§à§ê§Ñ§Ô§à§Ó§à§Ö §â§å§Ü§à§Ó§à§Õ§ã§ä§Ó§à, §Ü§à§ä§à§â§à§Ö §á§à§Ü§Ñ§Ù§í§Ó§Ñ§Ö§ä, §Ü§Ñ§Ü §ã§à§Ù§Õ§Ñ§ä§î §á§â§à§ã§ä§à§Û §Ó§Ú§Õ§Ø§Ö§ä §Ú§ß§æ§à§â§Þ§Ñ§è§Ú§à§ß§ß§à§Û §á§Ñ§ß§Ö§Ý§Ú. §£§í §Þ§à§Ø§Ö§ä§Ö §ã§Ü§Ñ§é§Ñ§ä§î §Ó§ã§Ö §æ§Ñ§Û§Ý§í §ï§ä§à§Ô§à §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó §Ó§Ú§Õ§Ö ZIP-§Ñ§â§ç§Ú§Ó§Ñ: lesson_gauge_chart.zip.
§¹§ä§à §Ó§í §Ò§å§Õ§Ö§ä§Ö §ã§à§Ù§Õ§Ñ§Ó§Ñ§ä§î
§£ §ç§à§Õ§Ö §ï§ä§à§Ô§à §å§â§à§Ü§Ñ §Ó§í §ã§ß§Ñ§é§Ñ§Ý§Ñ §ã§à§Ù§Õ§Ñ§Õ§Ú§ä§Ö basic "Hello, world!" §Ó§Ú§Õ§Ø§Ö§ä, §Ñ §Ù§Ñ§ä§Ö§Þ §á§â§Ö§à§Ò§â§Ñ§Ù§å§Û§ä§Ö §Ö§Ô§à §Ó §Ó§Ú§Õ§Ø§Ö§ä more advanced, §Ü§à§ä§à§â§í§Û §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Ó §Ó§Ú§Õ§Ö §Õ§Ú§Ñ§Ô§â§Ñ§Þ§Þ§í. §£§à§ä §Ü§Ñ§Ü §Ò§å§Õ§Ö§ä §Ó§í§Ô§Ý§ñ§Õ§Ö§ä§î §Ô§à§ä§à§Ó§í§Û §Ó§Ú§Õ§Ø§Ö§ä:
§¹§Ñ§ã§ä§î I - "§±§â§Ú§Ó§Ö§ä, §Þ§Ú§â!"
§£ §ï§ä§à§Þ §â§Ñ§Ù§Õ§Ö§Ý§Ö §Ó§í §Ú§Ù§å§é§Ú§ä§Ö, §Ü§Ñ§Ü §ã§à§Ù§Õ§Ñ§ä§î §Þ§Ú§ß§Ú§Þ§Ñ§Ý§î§ß§à §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§í§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§í §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú §Õ§à§Ò§Ñ§Ó§Ú§ä§î §ß§à§Ó§í§Û §Ó§Ú§Õ§Ø§Ö§ä §Ó §Ú§ß§ä§Ö§â§æ§Ö§Û§ã Áú»¢¶Ä²©.
§¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §á§å§ã§ä§à§Ô§à §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó §Ó§Ö§Ò-§Ú§ß§ä§Ö§â§æ§Ö§Û§ã Áú»¢¶Ä²©
- §³§à§Ù§Õ§Ñ§Û§ä§Ö §Ü§Ñ§ä§Ñ§Ý§à§Ô lesson_gauge_chart §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö modules §Ó§Ñ§ê§Ö§Û §å§ã§ä§Ñ§ß§à§Ó§Ü§Ú §Ó§Ö§Ò-§Ú§ß§ä§Ö§â§æ§Ö§Û§ã§Ñ Áú»¢¶Ä²© (§ß§Ñ§á§â§Ú§Þ§Ö§â, zabbix/ui/modules).
§£§ã§Ö §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î§ã§Ü§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§í §â§Ñ§ã§ã§Þ§Ñ§ä§â§Ú§Ó§Ñ§ð§ä§ã§ñ §Ü§Ñ§Ü §Ó§ß§Ö§ê§ß§Ú§Ö §Þ§à§Õ§å§Ý§Ú §Ú §Õ§à§Ý§Ø§ß§í §Ò§í§ä§î §Õ§à§Ò§Ñ§Ó§Ý§Ö§ß§í §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô modules §Ó§Ñ§ê§Ö§Û §å§ã§ä§Ñ§ß§à§Ó§Ü§Ú §Ó§Ö§Ò-§Ú§ß§ä§Ö§â§æ§Ö§Û§ã§Ñ Áú»¢¶Ä²© (§ß§Ñ§á§â§Ú§Þ§Ö§â, zabbix/ui/modules). §¬§Ñ§ä§Ñ§Ý§à§Ô zabbix/ui/widgets §Ù§Ñ§â§Ö§Ù§Ö§â§Ó§Ú§â§à§Ó§Ñ§ß §Õ§Ý§ñ §Ó§ã§ä§â§à§Ö§ß§ß§í§ç §Ó§Ú§Õ§Ø§Ö§ä§à§Ó Áú»¢¶Ä²© §Ú §à§Ò§ß§à§Ó§Ý§ñ§Ö§ä§ã§ñ §Ó§Þ§Ö§ã§ä§Ö §ã §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î§ã§Ü§Ú§Þ §Ú§ß§ä§Ö§â§æ§Ö§Û§ã§à§Þ Áú»¢¶Ä²©.
- §³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý manifest.json §ã §à§ã§ß§à§Ó§ß§í§Þ§Ú §Þ§Ö§ä§Ñ§Õ§Ñ§ß§ß§í§Þ§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ (§ã§Þ. §à§á§Ú§ã§Ñ§ß§Ú§Ö §á§à§Õ§Õ§Ö§â§Ø§Ú§Ó§Ñ§Ö§Þ§í§ç §á§Ñ§â§Ñ§Þ§Ö§ä§â§à§Ó).
ui/modules/lesson_gauge_chart/manifest.json
{
"manifest_version": 2.0,
"id": "lesson_gauge_chart",
"type": "widget",
"name": "Gauge chart",
"namespace": "LessonGaugeChart",
"version": "1.1",
"author": "Áú»¢¶Ä²©"
}- §£ §Ú§ß§ä§Ö§â§æ§Ö§Û§ã§Ö Áú»¢¶Ä²© §á§Ö§â§Ö§Û§Õ§Ú§ä§Ö §Ó §â§Ñ§Ù§Õ§Ö§Ý §¡§Õ§Þ§Ú§ß§Ú§ã§ä§â§Ú§â§à§Ó§Ñ§ß§Ú§Ö ¡ú §°§Ò§ë§Ú§Ö ¡ú §®§à§Õ§å§Ý§Ú §Ú §ß§Ñ§Ø§Þ§Ú§ä§Ö §Ü§ß§à§á§Ü§å §³§Ü§Ñ§ß§Ú§â§à§Ó§Ñ§ä§î §Ü§Ñ§ä§Ñ§Ý§à§Ô.
- §¯§Ñ§Û§Õ§Ú§ä§Ö §ß§à§Ó§í§Û §Þ§à§Õ§å§Ý§î §¥§Ú§Ñ§Ô§â§Ñ§Þ§Þ§Ñ §Ú§Ù§Þ§Ö§â§Ö§ß§Ú§Û §Ó §ã§á§Ú§ã§Ü§Ö §Ú §ß§Ñ§Ø§Þ§Ú§ä§Ö §Ô§Ú§á§Ö§â§ã§ã§í§Ý§Ü§å "§°§ä§Ü§Ý§ð§é§Ö§ß§à", §é§ä§à§Ò§í §Ú§Ù§Þ§Ö§ß§Ú§ä§î §ã§ä§Ñ§ä§å§ã §Þ§à§Õ§å§Ý§ñ §ã "§°§ä§Ü§Ý§ð§é§Ö§ß§à" §ß§Ñ "§£§Ü§Ý§ð§é§Ö§ß§à".
- §°§ä§Ü§â§à§Û§ä§Ö §Õ§Ñ§ê§Ò§à§â§Õ, §á§Ö§â§Ö§Ó§Ö§Õ§Ú§ä§Ö §Ö§Ô§à §Ó §â§Ö§Ø§Ú§Þ §â§Ö§Õ§Ñ§Ü§ä§Ú§â§à§Ó§Ñ§ß§Ú§ñ §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §ß§à§Ó§í§Û §Ó§Ú§Õ§Ø§Ö§ä. §£ §á§à§Ý§Ö §´§Ú§á §Ó§í§Ò§Ö§â§Ú§ä§Ö "§¥§Ñ§ä§é§Ú§Ü §Õ§Ú§Ñ§Ô§â§Ñ§Þ§Þ§í".
- §¯§Ñ §Õ§Ñ§ß§ß§í§Û §Þ§à§Þ§Ö§ß§ä §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §¥§Ú§Ñ§Ô§â§Ñ§Þ§Þ§Ñ §ã§à§Õ§Ö§â§Ø§Ú§ä §ä§à§Ý§î§Ü§à §à§Ò§ë§Ú§Ö §á§à§Ý§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ª§Þ§ñ §Ú §ª§ß§ä§Ö§â§Ó§Ñ§Ý §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ. §¯§Ñ§Ø§Þ§Ú§ä§Ö §¥§à§Ò§Ñ§Ó§Ú§ä§î, §é§ä§à§Ò§í §Õ§à§Ò§Ñ§Ó§Ú§ä§î §Ó§Ú§Õ§Ø§Ö§ä §ß§Ñ §á§Ñ§ß§Ö§Ý§î.
- §¯§Ñ §á§Ñ§ß§Ö§Ý§Ú §Ú§ß§ã§ä§â§å§Þ§Ö§ß§ä§à§Ó §Õ§à§Ý§Ø§Ö§ß §á§à§ñ§Ó§Ú§ä§î§ã§ñ §á§å§ã§ä§à§Û §Ó§Ú§Õ§Ø§Ö§ä. §¯§Ñ§Ø§Þ§Ú§ä§Ö §³§à§ç§â§Ñ§ß§Ú§ä§î §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§ñ §Ó §á§â§Ñ§Ó§à§Þ §Ó§Ö§â§ç§ß§Ö§Þ §å§Ô§Ý§å, §é§ä§à§Ò§í §ã§à§ç§â§Ñ§ß§Ú§ä§î §á§Ñ§ß§Ö§Ý§î.
§¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ
§¶§Ñ§Û§Ý view §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Õ§à§Ý§Ø§Ö§ß §ß§Ñ§ç§à§Õ§Ú§ä§î§ã§ñ §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö views (§Õ§Ý§ñ §ï§ä§à§Ô§à §â§å§Ü§à§Ó§à§Õ§ã§ä§Ó§Ñ ui/modules/lesson_gauge_chart/views/). §¦§ã§Ý§Ú §æ§Ñ§Û§Ý §Ú§Þ§Ö§Ö§ä §Ú§Þ§ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð widget.view.php, §Ó§Ñ§Þ §ß§Ö §ß§å§Ø§ß§à §â§Ö§Ô§Ú§ã§ä§â§Ú§â§à§Ó§Ñ§ä§î §Ö§Ô§à §Ó §æ§Ñ§Û§Ý§Ö manifest.json. §¦§ã§Ý§Ú §æ§Ñ§Û§Ý §Ú§Þ§Ö§Ö§ä §Õ§â§å§Ô§à§Ö §Ú§Þ§ñ, §å§Ü§Ñ§Ø§Ú§ä§Ö §Ö§Ô§à §Ó §â§Ñ§Ù§Õ§Ö§Ý§Ö actions/widget.lesson_gauge_chart.view §æ§Ñ§Û§Ý§Ñ manifest.json.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §Ü§Ñ§ä§Ñ§Ý§à§Ô views §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö lesson_gauge_chart.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý widget.view.php §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö views.
ui/modules/lesson_gauge_chart/views/widget.view.php
<?php
/**
* Gauge chart widget view.
*
* @var CView $this
* @var array $data
*/
(new CWidgetView($data))
->addItem(
new CTag('h1', true, 'Hello, world!')
)
->show();- §°§Ò§ß§à§Ó§Ú§ä§Ö §á§Ñ§ß§Ö§Ý§î §Þ§à§ß§Ú§ä§à§â§Ú§ß§Ô§Ñ. §£§Ú§Õ§Ø§Ö§ä §¥§Ú§Ñ§Ô§â§Ñ§Þ§Þ§Ñ §ä§Ö§á§Ö§â§î §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä §ß§Ñ§Õ§á§Ú§ã§î "§±§â§Ú§Ó§Ö§ä, §Þ§Ú§â!".
§¹§Ñ§ã§ä§î II - §¥§Ú§Ñ§Ô§â§Ñ§Þ§Þ§Ñ §Ú§Ù§Þ§Ö§â§Ö§ß§Ú§Û
§¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ú §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ß§Ú§Ö §Ú§ç §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§à§Ó
§£ §ï§ä§à§Þ §â§Ñ§Ù§Õ§Ö§Ý§Ö §Ó§í §å§Ù§ß§Ñ§Ö§ä§Ö, §Ü§Ñ§Ü §Õ§à§Ò§Ñ§Ó§Ú§ä§î §á§à§Ý§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú §à§ä§à§Ò§â§Ñ§Ù§Ú§ä§î §Ó§Ó§Ö§Õ§Ö§ß§ß§à§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó §Ó§Ú§Õ§Ö §ä§Ö§Ü§ã§ä§Ñ.
§¬§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ã§à§ã§ä§à§Ú§ä §Ú§Ù §æ§à§â§Þ§í (Áú»¢¶Ä²©\Widgets\CWidgetForm) §Ú §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §æ§à§â§Þ§í §Ó§Ú§Õ§Ø§Ö§ä§Ñ (widget.edit.php). §¹§ä§à§Ò§í §Õ§à§Ò§Ñ§Ó§Ú§ä§î §á§à§Ý§ñ (Áú»¢¶Ä²©\Widgets\CWidgetField), §Ó§Ñ§Þ §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§à §ã§à§Ù§Õ§Ñ§ä§î §Ü§Ý§Ñ§ã§ã WidgetForm, §Ü§à§ä§à§â§í§Û §Ò§å§Õ§Ö§ä §â§Ñ§ã§ê§Ú§â§ñ§ä§î Áú»¢¶Ä²©\Widgets\CWidgetForm.
§¶§à§â§Þ§Ñ §ã§à§Õ§Ö§â§Ø§Ú§ä §ß§Ñ§Ò§à§â §á§à§Ý§Ö§Û (Áú»¢¶Ä²©\Widgets\CWidgetField) §â§Ñ§Ù§Ý§Ú§é§ß§í§ç §ä§Ú§á§à§Ó, §Ü§à§ä§à§â§í§Ö §Ú§ã§á§à§Ý§î§Ù§å§ð§ä§ã§ñ §Õ§Ý§ñ §á§â§à§Ó§Ö§â§Ü§Ú §Ó§Ó§Ö§Õ§Ö§ß§ß§í§ç §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§Ö§Þ §Ù§ß§Ñ§é§Ö§ß§Ú§Û. §±§à§Ý§Ö §æ§à§â§Þ§í (Áú»¢¶Ä²©\Widgets\CWidgetField) §Õ§Ý§ñ §Ü§Ñ§Ø§Õ§à§Ô§à §ä§Ú§á§Ñ §Ó§ç§à§Õ§ß§à§Ô§à §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §á§â§Ö§à§Ò§â§Ñ§Ù§å§Ö§ä §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §Ó §Ö§Õ§Ú§ß§í§Û §æ§à§â§Þ§Ñ§ä §Õ§Ý§ñ §ã§à§ç§â§Ñ§ß§Ö§ß§Ú§ñ §Ö§Ô§à §Ó §Ò§Ñ§Ù§Ö §Õ§Ñ§ß§ß§í§ç.
§¶§Ñ§Û§Ý form §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Õ§à§Ý§Ø§Ö§ß §ß§Ñ§ç§à§Õ§Ú§ä§î§ã§ñ §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö includes (§Ó §Õ§Ñ§ß§ß§à§Þ §â§å§Ü§à§Ó§à§Õ§ã§ä§Ó§Ö ui/modules/lesson_gauge_chart/includes/). §¦§ã§Ý§Ú §æ§Ñ§Û§Ý §Ú§Þ§Ö§Ö§ä §Ú§Þ§ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð WidgetForm.php, §Ó§Ñ§Þ §ß§Ö §ß§å§Ø§ß§à §â§Ö§Ô§Ú§ã§ä§â§Ú§â§à§Ó§Ñ§ä§î §Ö§Ô§à §Ó §æ§Ñ§Û§Ý§Ö manifest.json. §¦§ã§Ý§Ú §æ§Ñ§Û§Ý §Ú§Þ§Ö§Ö§ä §Õ§â§å§Ô§à§Ö §Ú§Þ§ñ, §å§Ü§Ñ§Ø§Ú§ä§Ö §Ö§Ô§à §Ó §â§Ñ§Ù§Õ§Ö§Ý§Ö widget/form_class §æ§Ñ§Û§Ý§Ñ manifest.json.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §ß§à§Ó§í§Û §Ü§Ñ§ä§Ñ§Ý§à§Ô includes §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö lesson_gauge_chart.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý WidgetForm.php §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö includes.
ui/modules/lesson_gauge_chart/includes/WidgetForm.php
<?php
namespace Modules\LessonGaugeChart\Includes;
use Áú»¢¶Ä²©\Widgets\CWidgetForm;
class WidgetForm extends CWidgetForm {
}- §¥§à§Ò§Ñ§Ó§î§ä§Ö §á§à§Ý§Ö §°§á§Ú§ã§Ñ§ß§Ú§Ö §Ó §æ§à§â§Þ§å §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §¿§ä§à §à§Ò§í§é§ß§à§Ö §ä§Ö§Ü§ã§ä§à§Ó§à§Ö §á§à§Ý§Ö, §Ó §Ü§à§ä§à§â§à§Ö §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î §Þ§à§Ø§Ö§ä §Ó§Ó§Ö§ã§ä§Ú §Ý§ð§Ò§à§Û §ß§Ñ§Ò§à§â §ã§Ú§Þ§Ó§à§Ý§à§Ó. §¥§Ý§ñ §ï§ä§à§Ô§à §Ó§í §Þ§à§Ø§Ö§ä§Ö §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î §Ü§Ý§Ñ§ã§ã CWidgetFieldTextBox.
ui/modules/lesson_gauge_chart/includes/WidgetForm.php
<?php
namespace Modules\LessonGaugeChart\Includes;
use Áú»¢¶Ä²©\Widgets\CWidgetForm;
use Áú»¢¶Ä²©\Widgets\Fields\CWidgetFieldTextBox;
class WidgetForm extends CWidgetForm {
public function addFields(): self {
return $this
->addField(
new CWidgetFieldTextBox('description', _('Description'))
);
}
}- §£ §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö views §ã§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ widget.edit.php §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Õ§Ý§ñ §ß§à§Ó§à§Ô§à §á§à§Ý§ñ Description. §¥§Ý§ñ §Ü§Ý§Ñ§ã§ã§Ñ §á§à§Ý§ñ CWidgetFieldTextBox §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö§Þ §ñ§Ó§Ý§ñ§Ö§ä§ã§ñ CWidgetFieldTextBoxView.
ui/modules/lesson_gauge_chart/views/widget.edit.php
<?php
/**
* §±§â§à§ã§Þ§à§ä§â §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Õ§Ú§Ñ§Ô§â§Ñ§Þ§Þ§í §ã §å§Ü§Ñ§Ù§Ñ§ä§Ö§Ý§Ö§Þ.
*
* @var CView $this
* @var array $data
*/
(new CWidgetFormView($data))
->addField(
new CWidgetFieldTextBoxView($data['fields']['description'])
)
->show();§±§Ö§â§Ö§Û§Õ§Ú§ä§Ö §ß§Ñ §á§Ñ§ß§Ö§Ý§î §Ú §ß§Ñ§Ø§Þ§Ú§ä§Ö §ß§Ñ §Ù§ß§Ñ§é§à§Ü §ê§Ö§ã§ä§Ö§â§Ö§ß§Ü§Ú §Ó §Ó§Ú§Õ§Ø§Ö§ä§Ö, §é§ä§à§Ò§í §à§ä§Ü§â§í§ä§î §æ§à§â§Þ§å §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ.
§¶§à§â§Þ§Ñ §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ä§Ö§á§Ö§â§î §ã§à§Õ§Ö§â§Ø§Ú§ä §ß§à§Ó§à§Ö §ä§Ö§Ü§ã§ä§à§Ó§à§Ö §á§à§Ý§Ö §°§á§Ú§ã§Ñ§ß§Ú§Ö. §£§Ó§Ö§Õ§Ú§ä§Ö §Ý§ð§Ò§à§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö, §ß§Ñ§á§â§Ú§Þ§Ö§â §°§á§Ú§ã§Ñ§ß§Ú§Ö §Õ§Ú§Ñ§Ô§â§Ñ§Þ§Þ§í §Õ§Ñ§ä§é§Ú§Ü§à§Ó.
- §¯§Ñ§Ø§Þ§Ú§ä§Ö §±§â§Ú§Þ§Ö§ß§Ú§ä§î §Ó §æ§à§â§Þ§Ö §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §©§Ñ§ä§Ö§Þ §ß§Ñ§Ø§Þ§Ú§ä§Ö §³§à§ç§â§Ñ§ß§Ú§ä§î §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§ñ §Ó §á§â§Ñ§Ó§à§Þ §Ó§Ö§â§ç§ß§Ö§Þ §å§Ô§Ý§å, §é§ä§à§Ò§í §ã§à§ç§â§Ñ§ß§Ú§ä§î §á§Ñ§ß§Ö§Ý§î. §°§Ò§â§Ñ§ä§Ú§ä§Ö §Ó§ß§Ú§Þ§Ñ§ß§Ú§Ö, §é§ä§à §ß§à§Ó§à§Ö §à§á§Ú§ã§Ñ§ß§Ú§Ö §ß§Ú§Ô§Õ§Ö §ß§Ö §Ó§Ú§Õ§ß§à, §Ñ §Ó§Ú§Õ§Ø§Ö§ä §á§à-§á§â§Ö§Ø§ß§Ö§Þ§å §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä "§±§â§Ú§Ó§Ö§ä, §Þ§Ú§â!".
§¹§ä§à§Ò§í §ß§à§Ó§à§Ö §à§á§Ú§ã§Ñ§ß§Ú§Ö §á§à§ñ§Ó§Ú§Ý§à§ã§î §Ó §Ó§Ú§Õ§Ø§Ö§ä§Ö, §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §á§à§Ý§ñ §°§á§Ú§ã§Ñ§ß§Ú§Ö §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§à §á§à§Ý§å§é§Ú§ä§î §Ú§Ù §Ò§Ñ§Ù§í §Õ§Ñ§ß§ß§í§ç §Ú §á§Ö§â§Ö§Õ§Ñ§ä§î §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §¥§Ý§ñ §ï§ä§à§Ô§à §Ó§Ñ§Þ §ß§å§Ø§ß§à §ã§à§Ù§Õ§Ñ§ä§î §Ü§Ý§Ñ§ã§ã §Õ§Ö§Û§ã§ä§Ó§Ú§Û.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §ß§à§Ó§í§Û §Ü§Ñ§ä§Ñ§Ý§à§Ô actions §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö lesson_gauge_chart.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý WidgetView.php §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö actions. §¬§Ý§Ñ§ã§ã §Õ§Ö§Û§ã§ä§Ó§Ú§ñ WidgetView §â§Ñ§ã§ê§Ú§â§Ú§ä §Ü§Ý§Ñ§ã§ã CControllerDashboardWidgetView.
§©§ß§Ñ§é§Ö§ß§Ú§ñ §á§à§Ý§Ö§Û §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ç§â§Ñ§ß§ñ§ä§ã§ñ §Ó §ã§Ó§à§Û§ã§ä§Ó§Ö $fields_values §Ü§Ý§Ñ§ã§ã§Ñ §Õ§Ö§Û§ã§ä§Ó§Ú§ñ.
ui/modules/lesson_gauge_chart/actions/WidgetView.php
<?php
namespace Modules\LessonGaugeChart\Actions;
use CControllerDashboardWidgetView,
CControllerResponseData;
class WidgetView extends CControllerDashboardWidgetView {
protected function doAction(): void {
$this->setResponse(new CControllerResponseData([
'name' => $this->getInput('name', $this->widget->getName()),
'description' => $this->fields_values['description'],
'user' => [
'debug_mode' => $this->getDebugMode()
]
]));
}
}- §°§ä§Ü§â§à§Û§ä§Ö manifest.json §Ú §Ù§Ñ§â§Ö§Ô§Ú§ã§ä§â§Ú§â§å§Û§ä§Ö WidgetView §Ü§Ñ§Ü §Ü§Ý§Ñ§ã§ã §Õ§Ö§Û§ã§ä§Ó§Ú§ñ §Ó §â§Ñ§Ù§Õ§Ö§Ý§Ö actions/widget.lesson_gauge_chart.view.
ui/modules/lesson_gauge_chart/manifest.json
{
"manifest_version": 2.0,
"id": "lesson_gauge_chart",
"type": "widget",
"name": "Gauge chart",
"namespace": "LessonGaugeChart",
"version": "1.0",
"author": "Áú»¢¶Ä²©",
"actions": {
"widget.lesson_gauge_chart.view": {
"class": "WidgetView"
}
}
}- §´§Ö§á§Ö§â§î §Ó§í §Þ§à§Ø§Ö§ä§Ö §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §á§à§Ý§ñ §à§á§Ú§ã§Ñ§ß§Ú§ñ, §ã§à§Õ§Ö§â§Ø§Ñ§ë§Ö§Ö§ã§ñ §Ó $data['description'], §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §°§ä§Ü§â§à§Û§ä§Ö views/widget.view.php §Ú §Ù§Ñ§Þ§Ö§ß§Ú§ä§Ö §ã§ä§Ñ§ä§Ú§é§Ö§ã§Ü§Ú§Û §ä§Ö§Ü§ã§ä "§±§â§Ú§Ó§Ö§ä, §Þ§Ú§â!" §ã $data['description'].
ui/modules/lesson_gauge_chart/views/widget.view.php
<?php
/**
* §±§â§à§ã§Þ§à§ä§â §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Õ§Ú§Ñ§Ô§â§Ñ§Þ§Þ§í §ã §å§Ü§Ñ§Ù§Ñ§ä§Ö§Ý§Ö§Þ.
*
* @var CView $this
* @var array $data
*/
(new CWidgetView($data))
->addItem(
new CTag('h1', true, $data['description'])
)
->show();- §°§Ò§ß§à§Ó§Ú§ä§Ö §ã§ä§â§Ñ§ß§Ú§è§å §á§Ñ§ß§Ö§Ý§Ú. §´§Ö§á§Ö§â§î §Ó§í §Õ§à§Ý§Ø§ß§í §å§Ó§Ú§Õ§Ö§ä§î §ä§Ö§Ü§ã§ä §à§á§Ú§ã§Ñ§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó§Þ§Ö§ã§ä§à "§±§â§Ú§Ó§Ö§ä, §Þ§Ú§â!".
§±§à§Ý§å§é§Ö§ß§Ú§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§ñ §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §é§Ö§â§Ö§Ù API
§£§Ú§Õ§Ø§Ö§ä §Õ§à§Ý§Ø§Ö§ß §à§ä§à§Ò§â§Ñ§Ø§Ñ§ä§î §á§à§ã§Ý§Ö§Õ§ß§Ö§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §á§à §Ó§í§Ò§à§â§å §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§ñ. §¥§Ý§ñ §ï§ä§à§Ô§à §Ó§Ñ§Þ §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§à §Õ§à§Ò§Ñ§Ó§Ú§ä§î §Ó§à§Ù§Þ§à§Ø§ß§à§ã§ä§î §Ó§í§Ò§à§â§Ñ §ï§Ý§Ö§Þ§Ö§ß§ä§à§Ó §Õ§Ñ§ß§ß§í§ç §Ó §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ.
§£ §ï§ä§à§Þ §â§Ñ§Ù§Õ§Ö§Ý§Ö §Ó§í §å§Ù§ß§Ñ§Ö§ä§Ö, §Ü§Ñ§Ü §Õ§à§Ò§Ñ§Ó§Ú§ä§î §á§à§Ý§Ö §Ó§í§Ò§à§â§Ñ §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §Ó §æ§à§â§Þ§å §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú §Ü§Ñ§Ü §Õ§à§Ò§Ñ§Ó§Ú§ä§î §Ó§Ú§Ù§å§Ñ§Ý§î§ß§å§ð §é§Ñ§ã§ä§î §ï§ä§à§Ô§à §á§à§Ý§ñ §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú. §©§Ñ§ä§Ö§Þ §Ü§à§ß§ä§â§à§Ý§Ý§Ö§â §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ã§Þ§à§Ø§Ö§ä §á§à§Ý§å§é§Ñ§ä§î §Õ§Ñ§ß§ß§í§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §Ú §Ö§Ô§à §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §é§Ö§â§Ö§Ù §Ù§Ñ§á§â§à§ã API. §±§à§ã§Ý§Ö §á§à§Ý§å§é§Ö§ß§Ú§ñ §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §Þ§à§Ø§ß§à §à§ä§à§Ò§â§Ñ§Ù§Ú§ä§î §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ.
- §°§ä§Ü§â§à§Û§ä§Ö includes/WidgetForm.php §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §á§à§Ý§Ö CWidgetFieldMultiSelectItem. §¿§ä§à §á§à§Ù§Ó§à§Ý§Ú§ä §Ó§í§Ò§â§Ñ§ä§î §ï§Ý§Ö§Þ§Ö§ß§ä §Õ§Ñ§ß§ß§í§ç §Ó §æ§à§â§Þ§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú.
ui/modules/lesson_gauge_chart/includes/WidgetForm.php
<?php
namespace Modules\LessonGaugeChart\Includes;
use Áú»¢¶Ä²©\Widgets\{
CWidgetField,
CWidgetForm
};
use Áú»¢¶Ä²©\Widgets\Fields\{
CWidgetFieldMultiSelectItem,
CWidgetFieldTextBox
};
/**
* Gauge chart widget form.
*/
class WidgetForm extends CWidgetForm {
public function addFields(): self {
return $this
->addField(
(new CWidgetFieldMultiSelectItem('itemid', _('Item')))
->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
->setMultiple(false)
)
->addField(
new CWidgetFieldTextBox('description', _('Description'))
);
}
}- §°§ä§Ü§â§à§Û§ä§Ö views/widget.edit.php §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §Ó§Ú§Ù§å§Ñ§Ý§î§ß§í§Û §Ü§à§Þ§á§à§ß§Ö§ß§ä §á§à§Ý§ñ §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú.
ui/modules/lesson_gauge_chart/views/widget.edit.php
<?php
/**
* Gauge chart widget form view.
*
* @var CView $this
* @var array $data
*/
(new CWidgetFormView($data))
->addField(
new CWidgetFieldMultiSelectItemView($data['fields']['itemid'])
)
->addField(
new CWidgetFieldTextBoxView($data['fields']['description'])
)
->show();§£§Ö§â§ß§Ú§ä§Ö§ã§î §ß§Ñ §á§Ñ§ß§Ö§Ý§î §Ú §ß§Ñ§Ø§Þ§Ú§ä§Ö §ß§Ñ §Ù§ß§Ñ§é§à§Ü §ê§Ö§ã§ä§Ö§â§Ö§ß§Ü§Ú §Ó §Ó§Ú§Õ§Ø§Ö§ä§Ö, §é§ä§à§Ò§í §à§ä§Ü§â§í§ä§î §æ§à§â§Þ§å §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ.
§¶§à§â§Þ§Ñ §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ä§Ö§á§Ö§â§î §ã§à§Õ§Ö§â§Ø§Ú§ä §ß§à§Ó§à§Ö §á§à§Ý§Ö §Ó§Ó§à§Õ§Ñ §¿§Ý§Ö§Þ§Ö§ß§ä §Õ§Ñ§ß§ß§í§ç. §£§í§Ò§Ú§â§Ñ§Ö§Þ §ç§à§ã§ä "§³§Ö§â§Ó§Ö§â Áú»¢¶Ä²©" §Ú §á§å§ß§Ü§ä "§³§â§Ö§Õ§ß§ñ§ñ §ß§Ñ§Ô§â§å§Ù§Ü§Ñ (1§Þ §Ó §ã§â§Ö§Õ§ß§Ö§Þ)".
§¯§Ñ§Ø§Þ§Ú§ä§Ö §±§â§Ú§Þ§Ö§ß§Ú§ä§î §Ó §æ§à§â§Þ§Ö §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §©§Ñ§ä§Ö§Þ §ß§Ñ§Ø§Þ§Ú§ä§Ö §³§à§ç§â§Ñ§ß§Ú§ä§î §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§ñ §Ó §á§â§Ñ§Ó§à§Þ §Ó§Ö§â§ç§ß§Ö§Þ §å§Ô§Ý§å, §é§ä§à§Ò§í §ã§à§ç§â§Ñ§ß§Ú§ä§î §á§Ñ§ß§Ö§Ý§î.
§°§ä§Ü§â§à§Û§ä§Ö §Ú §Ú§Ù§Þ§Ö§ß§Ú§ä§Ö actions/WidgetView.php.
§³ §ï§ä§à§Ô§à §Þ§à§Þ§Ö§ß§ä§Ñ §Ú§Õ§Ö§ß§ä§Ú§æ§Ú§Ü§Ñ§ä§à§â §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §Ò§å§Õ§Ö§ä §Õ§à§ã§ä§å§á§Ö§ß §Ó §Ü§à§ß§ä§â§à§Ý§Ý§Ö§â§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ó $this->fields_values['itemid']. §®§Ö§ä§à§Õ §Ü§à§ß§ä§â§à§Ý§Ý§Ö§â§Ñ doAction() §ã§à§Ò§Ú§â§Ñ§Ö§ä §Õ§Ñ§ß§ß§í§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ (§Ú§Þ§ñ, §ä§Ú§á §Ù§ß§Ñ§é§Ö§ß§Ú§ñ, §Ö§Õ§Ú§ß§Ú§è§í §Ú§Ù§Þ§Ö§â§Ö§ß§Ú§ñ) §ã §á§à§Þ§à§ë§î§ð §Þ§Ö§ä§à§Õ§Ñ API item.get §Ú §á§à§ã§Ý§Ö§Õ§ß§Ö§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §ã §á§à§Þ§à§ë§î§ð §®§Ö§ä§à§Õ API history.get.
ui/modules/lesson_gauge_chart/actions/WidgetView.php
<?php
namespace Modules\LessonGaugeChart\Actions;
use API,
CControllerDashboardWidgetView,
CControllerResponseData;
class WidgetView extends CControllerDashboardWidgetView {
protected function doAction(): void {
$db_items = API::Item()->get([
'output' => ['itemid', 'value_type', 'name', 'units'],
'itemids' => $this->fields_values['itemid'],
'webitems' => true,
'filter' => [
'value_type' => [ITEM_VALUE_TYPE_UINT64, ITEM_VALUE_TYPE_FLOAT]
]
]);
$value = null;
if ($db_items) {
$item = $db_items[0];
$history = API::History()->get([
'output' => API_OUTPUT_EXTEND,
'itemids' => $item['itemid'],
'history' => $item['value_type'],
'sortfield' => 'clock',
'sortorder' => ZBX_SORT_DOWN,
'limit' => 1
]);
if ($history) {
$value = convertUnitsRaw([
'value' => $history[0]['value'],
'units' => $item['units']
]);
}
}
$this->setResponse(new CControllerResponseData([
'name' => $this->getInput('name', $this->widget->getName()),
'value' => $value,
'description' => $this->fields_values['description'],
'user' => [
'debug_mode' => $this->getDebugMode()
]
]));
}
}- §°§ä§Ü§â§à§Û§ä§Ö views/widget.view.php §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ.
ui/modules/lesson_gauge_chart/views/widget.view.php
<?php
/**
* Gauge chart widget view.
*
* @var CView $this
* @var array $data
*/
(new CWidgetView($data))
->addItem([
new CTag('h1', true, $data['description']),
new CDiv($data['value'] !== null ? $data['value']['value'] : _('No data'))
])
->show();- §°§Ò§ß§à§Ó§Ú§ä§Ö §ã§ä§â§Ñ§ß§Ú§è§å §á§Ñ§ß§Ö§Ý§Ú. §£§Ú§Õ§Ø§Ö§ä §à§ä§à§Ò§â§Ñ§Ù§Ú§ä §á§à§ã§Ý§Ö§Õ§ß§Ö§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç.
§¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §â§Ñ§ã§ê§Ú§â§Ö§ß§ß§í§ç §ß§Ñ§ã§ä§â§à§Ö§Ü §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú
§£ §ï§ä§à§Þ §â§Ñ§Ù§Õ§Ö§Ý§Ö §Ó§í §å§Ù§ß§Ñ§Ö§ä§Ö, §Ü§Ñ§Ü §Õ§à§Ò§Ñ§Ó§Ú§ä§î §â§Ñ§Ù§Ó§à§â§Ñ§é§Ú§Ó§Ñ§Ö§Þ§í§Û/§ã§Ó§à§â§Ñ§é§Ú§Ó§Ñ§Ö§Þ§í§Û §â§Ñ§Ù§Õ§Ö§Ý §²§Ñ§ã§ê§Ú§â§Ö§ß§ß§Ñ§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ §ã §Õ§à§á§à§Ý§ß§Ú§ä§Ö§Ý§î§ß§í§Þ§Ú §á§Ñ§â§Ñ§Þ§Ö§ä§â§Ñ§Þ§Ú, §ä§Ñ§Ü§Ú§Þ§Ú §Ü§Ñ§Ü §è§Ó§Ö§ä, §Þ§Ú§ß§Ú§Þ§Ñ§Ý§î§ß§à§Ö §Ú §Þ§Ñ§Ü§ã§Ú§Þ§Ñ§Ý§î§ß§à§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§ñ, §Ö§Õ§Ú§ß§Ú§è§í §Ú§Ù§Þ§Ö§â§Ö§ß§Ú§ñ §Ú §á§à§Ý§Ö §°§á§Ú§ã§Ñ§ß§Ú§Ö, §ã§à§Ù§Õ§Ñ§ß§ß§à§Ö §â§Ñ§ß§Ö§Ö.
- §³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý Widget.php §Ó §à§ã§ß§à§Ó§ß§à§Þ §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö §Ó§Ú§Õ§Ø§Ö§ä§à§Ó lesson_gauge_chart, §é§ä§à§Ò§í §ã§à§Ù§Õ§Ñ§ä§î §ß§à§Ó§í§Û §Ü§Ý§Ñ§ã§ã Widget.
§¬§Ý§Ñ§ã§ã Widget §â§Ñ§ã§ê§Ú§â§Ú§ä §Ò§Ñ§Ù§à§Ó§í§Û §Ü§Ý§Ñ§ã§ã CWidget, §é§ä§à§Ò§í §Õ§à§Ò§Ñ§Ó§Ú§ä§î/§á§Ö§â§Ö§à§á§â§Ö§Õ§Ö§Ý§Ú§ä§î §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð (§Ó §Õ§Ñ§ß§ß§à§Þ §ã§Ý§å§é§Ñ§Ö ¡ª §á§Ö§â§Ö§Ó§à§Õ§í). JavaScript, §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§ß§í§Û §ß§Ú§Ø§Ö, §à§ä§à§Ò§â§Ñ§Ø§Ñ§Ö§ä §ã§ä§â§à§Ü§å "§¯§Ö§ä §Õ§Ñ§ß§ß§í§ç" §Ó §ã§Ý§å§é§Ñ§Ö §à§ä§ã§å§ä§ã§ä§Ó§Ú§ñ §Õ§Ñ§ß§ß§í§ç. §³§ä§â§à§Ü§Ñ "§¯§Ö§ä §Õ§Ñ§ß§ß§í§ç" §á§â§Ú§ã§å§ä§ã§ä§Ó§å§Ö§ä §Ó §æ§Ñ§Û§Ý§Ñ§ç §á§Ö§â§Ö§Ó§à§Õ§Ñ Áú»¢¶Ä²© UI.
§¦§ã§Ý§Ú §Ö§ã§ä§î §Ü§Ñ§Ü§Ú§Ö-§Ý§Ú§Ò§à §Ü§à§ß§ã§ä§Ñ§ß§ä§í §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §â§Ö§Ü§à§Þ§Ö§ß§Õ§å§Ö§ä§ã§ñ §ä§Ñ§Ü§Ø§Ö §å§Ü§Ñ§Ù§Ñ§ä§î §Ú§ç §Ó §Ü§Ý§Ñ§ã§ã§Ö Widget.
ui/modules/lesson_gauge_chart/Widget.php
<?php
namespace Modules\LessonGaugeChart;
use Áú»¢¶Ä²©\Core\CWidget;
class Widget extends CWidget {
public const UNIT_AUTO = 0;
public const UNIT_STATIC = 1;
public function getTranslationStrings(): array {
return [
'class.widget.js' => [
'No data' => _('No data')
]
];
}
}- §°§ä§Ü§â§à§Û§ä§Ö includes/WidgetForm.php §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §ß§à§Ó§í§Ö §á§à§Ý§ñ Color (§Ó§í§Ò§à§â §è§Ó§Ö§ä§Ñ), Min (§é§Ú§ã§Ý§à§Ó§à§Ö §á§à§Ý§Ö), Max (§é§Ú§ã§Ý§à§Ó§à§Ö §á§à§Ý§Ö) §Ú Units (§Ó§í§Ò§Ö§â§Ú§ä§Ö) §Ú §à§á§â§Ö§Õ§Ö§Ý§Ú§ä§Ö §è§Ó§Ö§ä§à§Ó§Ñ§ñ §á§Ñ§Ý§Ú§ä§â§Ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð §Õ§Ý§ñ §á§Ñ§Ý§Ú§ä§â§í §è§Ó§Ö§ä§à§Ó, §é§ä§à§Ò§í §Ö§Ö §Þ§à§Ø§ß§à §Ò§í§Ý§à §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î §ß§Ñ §ã§Ý§Ö§Õ§å§ð§ë§Ú§ç §ê§Ñ§Ô§Ñ§ç.
ui/modules/lesson_gauge_chart/includes/WidgetForm.php
<?php
namespace Modules\LessonGaugeChart\Includes;
use Modules\LessonGaugeChart\Widget;
use Áú»¢¶Ä²©\Widgets\{
CWidgetField,
CWidgetForm
};
use Áú»¢¶Ä²©\Widgets\Fields\{
CWidgetFieldColor,
CWidgetFieldMultiSelectItem,
CWidgetFieldNumericBox,
CWidgetFieldSelect,
CWidgetFieldTextBox
};
/**
* Gauge chart widget form.
*/
class WidgetForm extends CWidgetForm {
public const DEFAULT_COLOR_PALETTE = [
'FF465C', 'B0AF07', '0EC9AC', '524BBC', 'ED1248', 'D1E754', '2AB5FF', '385CC7', 'EC1594', 'BAE37D',
'6AC8FF', 'EE2B29', '3CA20D', '6F4BBC', '00A1FF', 'F3601B', '1CAE59', '45CFDB', '894BBC', '6D6D6D'
];
public function addFields(): self {
return $this
->addField(
(new CWidgetFieldMultiSelectItem('itemid', _('Item')))
->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
->setMultiple(false)
)
->addField(
(new CWidgetFieldColor('chart_color', _('Color')))->setDefault('FF0000')
)
->addField(
(new CWidgetFieldNumericBox('value_min', _('Min')))
->setDefault(0)
->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
)
->addField(
(new CWidgetFieldNumericBox('value_max', _('Max')))
->setDefault(100)
->setFlags(CWidgetField::FLAG_NOT_EMPTY | CWidgetField::FLAG_LABEL_ASTERISK)
)
->addField(
(new CWidgetFieldSelect('value_units', _('Units'), [
Widget::UNIT_AUTO => _x('Auto', 'history source selection method'),
Widget::UNIT_STATIC => _x('Static', 'history source selection method')
]))->setDefault(Widget::UNIT_AUTO)
)
->addField(
(new CWidgetFieldTextBox('value_static_units'))
)
->addField(
new CWidgetFieldTextBox('description', _('Description'))
);
}
}- §°§ä§Ü§â§à§Û§ä§Ö views/widget.edit.php §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §Ó§Ú§Ù§å§Ñ§Ý§î§ß§í§Ö §Ü§à§Þ§á§à§ß§Ö§ß§ä§í §á§à§Ý§ñ §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú.
ui/modules/lesson_gauge_chart/views/widget.edit.php
<?php
/**
* Gauge chart widget form view.
*
* @var CView $this
* @var array $data
*/
$lefty_units = new CWidgetFieldSelectView($data['fields']['value_units']);
$lefty_static_units = (new CWidgetFieldTextBoxView($data['fields']['value_static_units']))
->setPlaceholder(_('value'))
->setWidth(ZBX_TEXTAREA_TINY_WIDTH);
(new CWidgetFormView($data))
->addField(
(new CWidgetFieldMultiSelectItemView($data['fields']['itemid']))
->setPopupParameter('numeric', true)
)
->addFieldset(
(new CWidgetFormFieldsetCollapsibleView(_('Advanced configuration')))
->addField(
new CWidgetFieldColorView($data['fields']['chart_color'])
)
->addField(
new CWidgetFieldNumericBoxView($data['fields']['value_min'])
)
->addField(
new CWidgetFieldNumericBoxView($data['fields']['value_max'])
)
->addItem([
$lefty_units->getLabel(),
(new CFormField([
$lefty_units->getView()->addClass(ZBX_STYLE_FORM_INPUT_MARGIN),
$lefty_static_units->getView()
]))
])
->addField(
new CWidgetFieldTextBoxView($data['fields']['description'])
)
)
->show();§®§Ö§ä§à§Õ addField() §Ü§Ý§Ñ§ã§ã§Ñ CWidgetFormView §á§â§Ú§ß§Ú§Þ§Ñ§Ö§ä §ã§ä§â§à§Ü§å §Ü§Ý§Ñ§ã§ã§Ñ CSS §Ó §Ü§Ñ§é§Ö§ã§ä§Ó§Ö §Ó§ä§à§â§à§Ô§à §á§Ñ§â§Ñ§Þ§Ö§ä§â§Ñ.
- §£§Ö§â§ß§Ú§ä§Ö§ã§î §ß§Ñ §á§Ñ§ß§Ö§Ý§î, §á§Ö§â§Ö§Ü§Ý§ð§é§Ú§ä§Ö§ã§î §Ó §â§Ö§Ø§Ú§Þ §â§Ö§Õ§Ñ§Ü§ä§Ú§â§à§Ó§Ñ§ß§Ú§ñ §Ú §ß§Ñ§Ø§Þ§Ú§ä§Ö §ß§Ñ §Ù§ß§Ñ§é§à§Ü §ê§Ö§ã§ä§Ö§â§Ö§ß§Ü§Ú §Ó §Ó§Ú§Õ§Ø§Ö§ä§Ö, §é§ä§à§Ò§í §à§ä§Ü§â§í§ä§î §æ§à§â§Þ§å §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §¶§à§â§Þ§Ñ §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ §ä§Ö§á§Ö§â§î §ã§à§Õ§Ö§â§Ø§Ú§ä §ß§à§Ó§í§Û §â§Ñ§ã§ê§Ú§â§ñ§Ö§Þ§í§Û/§ã§Ó§à§â§Ñ§é§Ú§Ó§Ñ§Ö§Þ§í§Û §â§Ñ§Ù§Õ§Ö§Ý §²§Ñ§ã§ê§Ú§â§Ö§ß§ß§Ñ§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ.
- §²§Ñ§Ù§Ó§Ö§â§ß§Ú§ä§Ö §â§Ñ§Ù§Õ§Ö§Ý §²§Ñ§ã§ê§Ú§â§Ö§ß§ß§Ñ§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ, §é§ä§à§Ò§í §å§Ó§Ú§Õ§Ö§ä§î §Õ§à§á§à§Ý§ß§Ú§ä§Ö§Ý§î§ß§í§Ö §á§à§Ý§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §°§Ò§â§Ñ§ä§Ú§ä§Ö §Ó§ß§Ú§Þ§Ñ§ß§Ú§Ö, §é§ä§à §á§à§Ý§Ö §¸§Ó§Ö§ä §á§à§Ü§Ñ §ß§Ö §Ú§Þ§Ö§Ö§ä §á§Ñ§Ý§Ú§ä§â§í §è§Ó§Ö§ä§à§Ó. §¿§ä§à §ã§Ó§ñ§Ù§Ñ§ß§à §ã §ä§Ö§Þ, §é§ä§à §á§Ñ§Ý§Ú§ä§â§Ñ §è§Ó§Ö§ä§à§Ó §Õ§à§Ý§Ø§ß§Ñ §Ò§í§ä§î §Ú§ß§Ú§è§Ú§Ñ§Ý§Ú§Ù§Ú§â§à§Ó§Ñ§ß§Ñ §ã §á§à§Þ§à§ë§î§ð JavaScript, §Ü§à§ä§à§â§í§Û §Ò§å§Õ§Ö§ä §Õ§à§Ò§Ñ§Ó§Ý§Ö§ß §Ó §ã§Ý§Ö§Õ§å§ð§ë§Ö§Þ §â§Ñ§Ù§Õ§Ö§Ý§Ö ¡ª §¥§à§Ò§Ñ§Ó§î§ä§Ö JavaScript §Ó §Ó§Ú§Õ§Ø§Ö§ä.
§¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö JavaScript §Ó §Ó§Ú§Õ§Ø§Ö§ä
§£ §ï§ä§à§Þ §â§Ñ§Ù§Õ§Ö§Ý§Ö §Ó§í §å§Ù§ß§Ñ§Ö§ä§Ö, §Ü§Ñ§Ü §Õ§à§Ò§Ñ§Ó§Ú§ä§î §Ú§ß§Õ§Ú§Ü§Ñ§ä§à§â§ß§í§Û §Ô§â§Ñ§æ§Ú§Ü, §ã§à§Ù§Õ§Ñ§ß§ß§í§Û §ã §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ß§Ú§Ö§Þ JavaScript, §Ü§à§ä§à§â§í§Û §á§à§Ü§Ñ§Ù§í§Ó§Ñ§Ö§ä, §ñ§Ó§Ý§ñ§Ö§ä§ã§ñ §Ý§Ú §á§à§ã§Ý§Ö§Õ§ß§Ö§Ö §Ù§ß§Ñ§é§Ö§ß§Ú§Ö §ß§à§â§Þ§Ñ§Ý§î§ß§í§Þ §Ú§Ý§Ú §ã§Ý§Ú§ê§Ü§à§Þ §Ó§í§ã§à§Ü§Ú§Þ/§ß§Ú§Ù§Ü§Ú§Þ.
- §³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý widget.edit.js.php §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö views.
JavaScript §Ò§å§Õ§Ö§ä §à§ä§Ó§Ö§é§Ñ§ä§î §Ù§Ñ §Ú§ß§Ú§è§Ú§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ð §Ó§í§Ò§à§â§Ñ §è§Ó§Ö§ä§Ñ §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ú §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú.
ui/modules/lesson_gauge_chart/views/widget.edit.js.php
<?php
use Modules\LessonGaugeChart\Widget;
?>
window.widget_lesson_gauge_chart_form = new class {
init({color_palette}) {
this._unit_select = document.getElementById('value_units');
this._unit_value = document.getElementById('value_static_units');
this._unit_select.addEventListener('change', () => this.updateForm());
colorPalette.setThemeColors(color_palette);
for (const colorpicker of jQuery('.<?= ZBX_STYLE_COLOR_PICKER ?> input')) {
jQuery(colorpicker).colorpicker();
}
const overlay = overlays_stack.getById('widget_properties');
for (const event of ['overlay.reload', 'overlay.close']) {
overlay.$dialogue[0].addEventListener(event, () => { jQuery.colorpicker('hide'); });
}
this.updateForm();
}
updateForm() {
this._unit_value.disabled = this._unit_select.value == <?= Widget::UNIT_AUTO ?>;
}
};- §°§ä§Ü§â§à§Û§ä§Ö views/widget.edit.php §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §æ§Ñ§Û§Ý widget.edit.js.php §ã JavaScript §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú. §¥§Ý§ñ §ï§ä§à§Ô§à §Ú§ã§á§à§Ý§î§Ù§å§Û§ä§Ö §Þ§Ö§ä§à§Õ includeJsFile(). §¹§ä§à§Ò§í §Õ§à§Ò§Ñ§Ó§Ú§ä§î §Ó§ã§ä§â§à§Ö§ß§ß§í§Û JavaScript, §Ú§ã§á§à§Ý§î§Ù§å§Û§ä§Ö §Þ§Ö§ä§à§Õ addJavaScript().
ui/modules/lesson_gauge_chart/views/widget.edit.php
<?php
/**
* Gauge chart widget form view.
*
* @var CView $this
* @var array $data
*/
use Modules\LessonGaugeChart\Includes\WidgetForm;
$lefty_units = new CWidgetFieldSelectView($data['fields']['value_units']);
$lefty_static_units = (new CWidgetFieldTextBoxView($data['fields']['value_static_units']))
->setPlaceholder(_('value'))
->setWidth(ZBX_TEXTAREA_TINY_WIDTH);
(new CWidgetFormView($data))
->addField(
(new CWidgetFieldMultiSelectItemView($data['fields']['itemid']))
->setPopupParameter('numeric', true)
)
->addFieldset(
(new CWidgetFormFieldsetCollapsibleView(_('Advanced configuration')))
->addField(
new CWidgetFieldColorView($data['fields']['chart_color'])
)
->addField(
new CWidgetFieldNumericBoxView($data['fields']['value_min'])
)
->addField(
new CWidgetFieldNumericBoxView($data['fields']['value_max'])
)
->addItem([
$lefty_units->getLabel(),
(new CFormField([
$lefty_units->getView()->addClass(ZBX_STYLE_FORM_INPUT_MARGIN),
$lefty_static_units->getView()
]))
])
->addField(
new CWidgetFieldTextBoxView($data['fields']['description'])
)
)
->includeJsFile('widget.edit.js.php')
->addJavaScript('widget_lesson_gauge_chart_form.init('.json_encode([
'color_palette' => WidgetForm::DEFAULT_COLOR_PALETTE
], JSON_THROW_ON_ERROR).');')
->show();- §£§Ö§â§ß§Ú§ä§Ö§ã§î §ß§Ñ §á§Ñ§ß§Ö§Ý§î §Ú §ß§Ñ§Ø§Þ§Ú§ä§Ö §ß§Ñ §Ù§ß§Ñ§é§à§Ü §ê§Ö§ã§ä§Ö§â§Ö§ß§Ü§Ú §Ó §Ó§Ú§Õ§Ø§Ö§ä§Ö, §é§ä§à§Ò§í §à§ä§Ü§â§í§ä§î §æ§à§â§Þ§å §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §´§Ö§á§Ö§â§î §â§Ñ§Ù§Ó§Ö§â§ß§Ú§ä§Ö §â§Ñ§Ù§Õ§Ö§Ý §²§Ñ§ã§ê§Ú§â§Ö§ß§ß§Ñ§ñ §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§ñ, §é§ä§à§Ò§í §å§Ó§Ú§Õ§Ö§ä§î §Ú§ß§Ú§è§Ú§Ñ§Ý§Ú§Ù§Ú§â§à§Ó§Ñ§ß§ß§í§Û §Ó§í§Ò§à§â §è§Ó§Ö§ä§Ñ. §©§Ñ§á§à§Ý§ß§Ú§ä§Ö §á§à§Ý§ñ §Ù§ß§Ñ§é§Ö§ß§Ú§ñ§Þ§Ú §Ú §Ó§í§Ò§Ö§â§Ú§ä§Ö §è§Ó§Ö§ä §Õ§Ý§ñ §Ú§ß§Õ§Ú§Ü§Ñ§ä§à§â§ß§à§Ô§à §Ô§â§Ñ§æ§Ú§Ü§Ñ.
§¯§Ñ§Ø§Þ§Ú§ä§Ö §ß§Ñ §±§â§Ú§Þ§Ö§ß§Ú§ä§î §Ó §æ§à§â§Þ§Ö §ß§Ñ§ã§ä§â§à§Û§Ü§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ. §©§Ñ§ä§Ö§Þ §ß§Ñ§Ø§Þ§Ú§ä§Ö §ß§Ñ §³§à§ç§â§Ñ§ß§Ú§ä§î §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§ñ §Ó §á§â§Ñ§Ó§à§Þ §Ó§Ö§â§ç§ß§Ö§Þ §å§Ô§Ý§å, §é§ä§à§Ò§í §ã§à§ç§â§Ñ§ß§Ú§ä§î §á§Ñ§ß§Ö§Ý§î.
§°§ä§Ü§â§à§Û§ä§Ö actions/WidgetView.php §Ú §à§Ò§ß§à§Ó§Ú§ä§Ö §Ü§à§ß§ä§â§à§Ý§Ý§Ö§â.
§³§Ó§à§Û§ã§ä§Ó§à $this->fields_values §ä§Ö§á§Ö§â§î §ã§à§Õ§Ö§â§Ø§Ú§ä §Ù§ß§Ñ§é§Ö§ß§Ú§ñ §Ó§ã§Ö§ç §á§à§Ý§Ö§Û §²§Ñ§ã§ê§Ú§â§Ö§ß§ß§à§Û §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú. §©§Ñ§Ó§Ö§â§ê§Ú§ä§Ö §ß§Ñ§ã§ä§â§à§Û§Ü§å §Ü§à§ß§ä§â§à§Ý§Ý§Ö§â§Ñ, §é§ä§à§Ò§í §à§Ò§Ö§ã§á§Ö§é§Ú§ä§î §á§Ö§â§Ö§Õ§Ñ§é§å §Ü§à§ß§æ§Ú§Ô§å§â§Ñ§è§Ú§Ú §Ú §Ó§í§Ò§â§Ñ§ß§ß§à§Ô§à §Ù§ß§Ñ§é§Ö§ß§Ú§ñ §ï§Ý§Ö§Þ§Ö§ß§ä§Ñ §Õ§Ñ§ß§ß§í§ç §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ö §Ó§Ú§Õ§Ø§Ö§ä§Ñ.
ui/modules/lesson_gauge_chart/actions/WidgetView.php
<?php
namespace Modules\LessonGaugeChart\Actions;
use API,
CControllerDashboardWidgetView,
CControllerResponseData;
class WidgetView extends CControllerDashboardWidgetView {
protected function doAction(): void {
$db_items = API::Item()->get([
'output' => ['itemid', 'value_type', 'name', 'units'],
'itemids' => $this->fields_values['itemid'],
'webitems' => true,
'filter' => [
'value_type' => [ITEM_VALUE_TYPE_UINT64, ITEM_VALUE_TYPE_FLOAT]
]
]);
$history_value = null;
if ($db_items) {
$item = $db_items[0];
$history = API::History()->get([
'output' => API_OUTPUT_EXTEND,
'itemids' => $item['itemid'],
'history' => $item['value_type'],
'sortfield' => 'clock',
'sortorder' => ZBX_SORT_DOWN,
'limit' => 1
]);
if ($history) {
$history_value = convertUnitsRaw([
'value' => $history[0]['value'],
'units' => $item['units']
]);
}
}
$this->setResponse(new CControllerResponseData([
'name' => $this->getInput('name', $this->widget->getName()),
'history' => $history_value,
'fields_values' => $this->fields_values,
'user' => [
'debug_mode' => $this->getDebugMode()
]
]));
}
}- §°§ä§Ü§â§à§Û§ä§Ö §Ú §Ú§Ù§Þ§Ö§ß§Ú§ä§Ö views/widget.view.php.
§£§Ñ§Þ §ß§å§Ø§ß§à §ã§à§Ù§Õ§Ñ§ä§î §Ü§à§ß§ä§Ö§Û§ß§Ö§â §Õ§Ý§ñ §Ú§ß§Õ§Ú§Ü§Ñ§ä§à§â§ß§à§Ô§à §Ô§â§Ñ§æ§Ú§Ü§Ñ, §Ü§à§ä§à§â§í§Û §Ó§í §ß§Ñ§â§Ú§ã§å§Ö§ä§Ö §ß§Ñ §ã§Ý§Ö§Õ§å§ð§ë§Ú§ç §ï§ä§Ñ§á§Ñ§ç, §Ú §Ü§à§ß§ä§Ö§Û§ß§Ö§â §Õ§Ý§ñ §à§á§Ú§ã§Ñ§ß§Ú§ñ.
§¹§ä§à§Ò§í §á§Ö§â§Ö§Õ§Ñ§ä§î §Ù§ß§Ñ§é§Ö§ß§Ú§ñ §Ó JavaScript §Ó §Ó§Ú§Õ§Ö JSON-§à§Ò§ì§Ö§Ü§ä§Ñ, §Ú§ã§á§à§Ý§î§Ù§å§Û§ä§Ö §Þ§Ö§ä§à§Õ setVar().
ui/modules/lesson_gauge_chart/views/widget.view.php
<?php
/**
* Gauge chart widget view.
*
* @var CView $this
* @var array $data
*/
(new CWidgetView($data))
->addItem([
(new CDiv())->addClass('chart'),
$data['fields_values']['description']
? (new CDiv($data['fields_values']['description']))->addClass('description')
: null
])
->setVar('history', $data['history'])
->setVar('fields_values', $data['fields_values'])
->show();§³§à§Ù§Õ§Ñ§Û§ä§Ö §ß§à§Ó§å§ð §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§ð assets §Ó §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§Ú lesson_gauge_chart. §¿§ä§Ñ §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§ñ §Ò§å§Õ§Ö§ä §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î§ã§ñ §Õ§Ý§ñ §ç§â§Ñ§ß§Ö§ß§Ú§ñ JavaScript, CSS §Ú, §Ó§à§Ù§Þ§à§Ø§ß§à, §Õ§â§å§Ô§Ú§ç §â§Ö§ã§å§â§ã§à§Ó, §ä§Ñ§Ü§Ú§ç §Ü§Ñ§Ü §ê§â§Ú§æ§ä§í §Ú§Ý§Ú §Ú§Ù§à§Ò§â§Ñ§Ø§Ö§ß§Ú§ñ.
§¥§Ý§ñ JavaScript, §Ú§ã§á§à§Ý§î§Ù§å§Ö§Þ§à§Ô§à §Ó §á§â§Ö§Õ§ã§ä§Ñ§Ó§Ý§Ö§ß§Ú§Ú §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §ã§à§Ù§Õ§Ñ§Û§ä§Ö §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§ð js §Ó §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§Ú assets.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý class.widget.js §Ó §Õ§Ú§â§Ö§Ü§ä§à§â§Ú§Ú assets/js.
§¿§ä§à§ä JavaScript-§Ü§Ý§Ñ§ã§ã §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ò§å§Õ§Ö§ä §â§Ñ§ã§ê§Ú§â§ñ§ä§î §Ò§Ñ§Ù§à§Ó§í§Û JavaScript-§Ü§Ý§Ñ§ã§ã §Ó§ã§Ö§ç §Ó§Ú§Õ§Ø§Ö§ä§à§Ó §á§Ñ§ß§Ö§Ý§Ú - CWidget.
§±§Ñ§ß§Ö§Ý§î §á§à§Ý§Ñ§Ô§Ñ§Ö§ä§ã§ñ §ß§Ñ §á§â§Ñ§Ó§Ú§Ý§î§ß§å§ð §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ð §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú §á§Ö§â§Ö§Õ§Ñ§Ö§ä §Ý§ð§Ò§å§ð §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ§å§ð §Ú§ß§æ§à§â§Þ§Ñ§è§Ú§ð §Ó§Ú§Õ§Ø§Ö§ä§å, §Ó§í§Ù§í§Ó§Ñ§ñ §ã§à§à§ä§Ó§Ö§ä§ã§ä§Ó§å§ð§ë§Ú§Ö JavaScript-§Þ§Ö§ä§à§Õ§í. §±§Ñ§ß§Ö§Ý§î §ä§Ñ§Ü§Ø§Ö §à§Ø§Ú§Õ§Ñ§Ö§ä, §é§ä§à §Ó§Ú§Õ§Ø§Ö§ä §Ò§å§Õ§Ö§ä §Ô§Ö§ß§Ö§â§Ú§â§à§Ó§Ñ§ä§î §ã§à§Ò§í§ä§Ú§ñ §á§â§Ú §Ó§Ù§Ñ§Ú§Þ§à§Õ§Ö§Û§ã§ä§Ó§Ú§Ú. §´§Ñ§Ü§Ú§Þ §à§Ò§â§Ñ§Ù§à§Þ, §Ü§Ý§Ñ§ã§ã CWidget §ã§à§Õ§Ö§â§Ø§Ú§ä §ß§Ñ§Ò§à§â §Þ§Ö§ä§à§Õ§à§Ó §ã §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§Ö§Û §á§à§Ó§Ö§Õ§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð, §Ü§à§ä§à§â§í§Ö §Þ§à§Ô§å§ä §Ò§í§ä§î §ß§Ñ§ã§ä§â§à§Ö§ß§í §á§å§ä§Ö§Þ §â§Ñ§ã§ê§Ú§â§Ö§ß§Ú§ñ §Ü§Ý§Ñ§ã§ã§Ñ.
§£ §Õ§Ñ§ß§ß§à§Þ §ã§Ý§å§é§Ñ§Ö §ä§â§Ö§Ò§å§Ö§ä§ã§ñ §à§á§â§Ö§Õ§Ö§Ý§Ö§ß§ß§Ñ§ñ §ß§Ñ§ã§ä§â§à§Û§Ü§Ñ, §á§à§ï§ä§à§Þ§å §á§à§Ý§î§Ù§à§Ó§Ñ§ä§Ö§Ý§î§ã§Ü§Ñ§ñ §Ý§à§Ô§Ú§Ü§Ñ §Ò§å§Õ§Ö§ä §â§Ö§Ñ§Ý§Ú§Ù§à§Ó§Ñ§ß§Ñ §Õ§Ý§ñ §ã§Ý§Ö§Õ§å§ð§ë§Ö§Ô§à §á§à§Ó§Ö§Õ§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ:
- §Ú§ß§Ú§è§Ú§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ü§à§ä§à§â§Ñ§ñ §à§ä§Ó§Ö§é§Ñ§Ö§ä §Ù§Ñ §à§á§â§Ö§Õ§Ö§Ý§Ö§ß§Ú§Ö §Ö§Ô§à §ß§Ñ§é§Ñ§Ý§î§ß§à§Ô§à §ã§à§ã§ä§à§ñ§ß§Ú§ñ (§ã§Þ. §Þ§Ö§ä§à§Õ onInitialize())
- §à§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§Ö §ã§à§Õ§Ö§â§Ø§Ú§Þ§à§Ô§à §Ó§Ú§Õ§Ø§Ö§ä§Ñ (§ä§à §Ö§ã§ä§î §á§à§ã§ä§â§à§Ö§ß§Ú§Ö §Ú§ß§Õ§Ú§Ü§Ñ§ä§à§â§ß§à§Ô§à §Ô§â§Ñ§æ§Ú§Ü§Ñ), §Ö§ã§Ý§Ú §á§â§à§è§Ö§ã§ã §à§Ò§ß§à§Ó§Ý§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ù§Ñ§Ó§Ö§â§ê§Ú§Ý§ã§ñ §å§ã§á§Ö§ê§ß§à §Ú §Ò§Ö§Ù §à§ê§Ú§Ò§à§Ü (§ã§Þ. §Þ§Ö§ä§à§Õ processUpdateResponse(response) §Ú §ã§Ó§ñ§Ù§Ñ§ß§ß§í§Ö §ã §ß§Ú§Þ §Þ§Ö§ä§à§Õ§í _resizeChart() §Ú _resizeChart())
- §Ú§Ù§Þ§Ö§ß§Ö§ß§Ú§Ö §â§Ñ§Ù§Þ§Ö§â§Ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ (§ã§Þ. §Þ§Ö§ä§à§Õ onResize() §Ú §ã§Ó§ñ§Ù§Ñ§ß§ß§í§Û §ã §ß§Ú§Þ §Þ§Ö§ä§à§Õ _resizeChart())
§¥§Ý§ñ §Õ§â§å§Ô§Ú§ç §Ñ§ã§á§Ö§Ü§ä§à§Ó §Ó§Ú§Õ§Ø§Ö§ä§Ñ §Ú§ß§Õ§Ú§Ü§Ñ§ä§à§â§ß§à§Ô§à §Ô§â§Ñ§æ§Ú§Ü§Ñ §Ò§å§Õ§Ö§ä §Ú§ã§á§à§Ý§î§Ù§à§Ó§Ñ§ä§î§ã§ñ §â§Ö§Ñ§Ý§Ú§Ù§Ñ§è§Ú§ñ §á§à§Ó§Ö§Õ§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ §á§à §å§Þ§à§Ý§é§Ñ§ß§Ú§ð. §¹§ä§à§Ò§í §å§Ù§ß§Ñ§ä§î §Ò§à§Ý§î§ê§Ö §à JavaScript-§Þ§Ö§ä§à§Õ§Ñ§ç §Ü§Ý§Ñ§ã§ã§Ñ CWidget, §ã§Þ. JavaScript.
§±§à§ã§Ü§à§Ý§î§Ü§å §ï§ä§à§ä JavaScript §ß§Ö§à§Ò§ç§à§Õ§Ú§Þ §Õ§Ý§ñ §à§ä§à§Ò§â§Ñ§Ø§Ö§ß§Ú§ñ §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §à§ß §Õ§à§Ý§Ø§Ö§ß §Ò§í§ä§î §Ù§Ñ§Ô§â§å§Ø§Ö§ß §Ó§Þ§Ö§ã§ä§Ö §ã§à §ã§ä§â§Ñ§ß§Ú§è§Ö§Û §á§Ñ§ß§Ö§Ý§Ú. §¹§ä§à§Ò§í §Ó§Ü§Ý§ð§é§Ú§ä§î §Ù§Ñ§Ô§â§å§Ù§Ü§å JavaScript, §Ó§Ñ§Þ §á§à§ä§â§Ö§Ò§å§Ö§ä§ã§ñ §à§Ò§ß§à§Ó§Ú§ä§î §á§Ñ§â§Ñ§Þ§Ö§ä§â§í assets/js §Ú js_class §Ó §æ§Ñ§Û§Ý§Ö manifest.json, §Ü§Ñ§Ü §á§à§Ü§Ñ§Ù§Ñ§ß§à §Ó §ê§Ñ§Ô§Ö 10.
ui/modules/lesson_gauge_chart/assets/js/class.widget.js
class WidgetLessonGaugeChart extends CWidget {
static UNIT_AUTO = 0;
static UNIT_STATIC = 1;
onInitialize() {
super.onInitialize();
this._refresh_frame = null;
this._chart_container = null;
this._canvas = null;
this._chart_color = null;
this._min = null;
this._max = null;
this._value = null;
this._last_value = null;
this._units = '';
}
processUpdateResponse(response) {
if (response.history === null) {
this._value = null;
this._units = '';
}
else {
this._value = Number(response.history.value);
this._units = response.fields_values.value_units == WidgetLessonGaugeChart.UNIT_AUTO
? response.history.units
: response.fields_values.value_static_units;
}
this._chart_color = response.fields_values.chart_color;
this._min = Number(response.fields_values.value_min);
this._max = Number(response.fields_values.value_max);
super.processUpdateResponse(response);
}
setContents(response) {
if (this._canvas === null) {
super.setContents(response);
this._chart_container = this._body.querySelector('.chart');
this._chart_container.style.height =
`${this._getContentsSize().height - this._body.querySelector('.description').clientHeight}px`;
this._canvas = document.createElement('canvas');
this._chart_container.appendChild(this._canvas);
this._resizeChart();
}
this._updatedChart();
}
onResize() {
super.onResize();
if (this._state === WIDGET_STATE_ACTIVE) {
this._resizeChart();
}
}
_resizeChart() {
const ctx = this._canvas.getContext('2d');
const dpr = window.devicePixelRatio;
this._canvas.style.display = 'none';
const size = Math.min(this._chart_container.offsetWidth, this._chart_container.offsetHeight);
this._canvas.style.display = '';
this._canvas.width = size * dpr;
this._canvas.height = size * dpr;
ctx.scale(dpr, dpr);
this._canvas.style.width = `${size}px`;
this._canvas.style.height = `${size}px`;
this._refresh_frame = null;
this._updatedChart();
}
_updatedChart() {
if (this._last_value === null) {
this._last_value = this._min;
}
const start_time = Date.now();
const end_time = start_time + 400;
const animate = () => {
const time = Date.now();
if (time <= end_time) {
const progress = (time - start_time) / (end_time - start_time);
const smooth_progress = 0.5 + Math.sin(Math.PI * (progress - 0.5)) / 2;
let value = this._value !== null ? this._value : this._min;
value = (this._last_value + (value - this._last_value) * smooth_progress - this._min) / (this._max - this._min);
const ctx = this._canvas.getContext('2d');
const size = this._canvas.width;
const char_weight = size / 12;
const char_shadow = 3;
const char_x = size / 2;
const char_y = size / 2;
const char_radius = (size - char_weight) / 2 - char_shadow;
const font_ratio = 32 / 100;
ctx.clearRect(0, 0, size, size);
ctx.beginPath();
ctx.shadowBlur = char_shadow;
ctx.shadowColor = '#bbb';
ctx.strokeStyle = '#eee';
ctx.lineWidth = char_weight;
ctx.lineCap = 'round';
ctx.arc(char_x, char_y, char_radius, Math.PI * 0.749, Math.PI * 2.251, false);
ctx.stroke();
ctx.beginPath();
ctx.strokeStyle = `#${this._chart_color}`;
ctx.lineWidth = char_weight - 2;
ctx.lineCap = 'round';
ctx.arc(char_x, char_y, char_radius, Math.PI * 0.75,
Math.PI * (0.75 + (1.5 * Math.min(1, Math.max(0, value)))), false
);
ctx.stroke();
ctx.shadowBlur = 2;
ctx.fillStyle = '#1f2c33';
ctx.font = `${(char_radius * font_ratio)|0}px Arial`;
ctx.textAlign = 'center';
ctx.textBaseline = 'middle';
ctx.fillText(`${this._value !== null ? this._value : t('No data')}${this._units}`,
char_x, char_y, size - char_shadow * 4 - char_weight * 2
);
ctx.fillStyle = '#768d99';
ctx.font = `${(char_radius * font_ratio * .5)|0}px Arial`;
ctx.textBaseline = 'top';
ctx.textAlign = 'left';
ctx.fillText(`${this._min}${this._min != '' ? this._units : ''}`,
char_weight * .75, size - char_weight * 1.25, size / 2 - char_weight
);
ctx.textAlign = 'right';
ctx.fillText(`${this._max}${this._max != '' ? this._units : ''}`,
size - char_weight * .75, size - char_weight * 1.25, size / 2 - char_weight
);
requestAnimationFrame(animate);
}
else {
this._last_value = this._value;
}
};
requestAnimationFrame(animate);
}
}- §°§ä§Ü§â§à§Û§ä§Ö manifest.json §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö:
- §Ú§Þ§ñ §æ§Ñ§Û§Ý§Ñ (class.widget.js) §Ó §Þ§Ñ§ã§ã§Ú§Ó §Ó §â§Ñ§Ù§Õ§Ö§Ý§Ö assets/js;
- §Ú§Þ§ñ §Ü§Ý§Ñ§ã§ã§Ñ (WidgetLessonGaugeChart) §Ó §á§Ñ§â§Ñ§Þ§Ö§ä§â js_class §Ó §â§Ñ§Ù§Õ§Ö§Ý§Ö widget.
§¬§Ý§Ñ§ã§ã WidgetLessonGaugeChart §ä§Ö§á§Ö§â§î §Ò§å§Õ§Ö§ä §Ñ§Ó§ä§à§Þ§Ñ§ä§Ú§é§Ö§ã§Ü§Ú §Ù§Ñ§Ô§â§å§Ø§Ñ§ä§î§ã§ñ §Ó§Þ§Ö§ã§ä§Ö §ã §á§Ñ§ß§Ö§Ý§î§ð.
ui/modules/lesson_gauge_chart/manifest.json
{
"manifest_version": 2.0,
"id": "lesson_gauge_chart",
"type": "widget",
"name": "Gauge chart",
"namespace": "LessonGaugeChart",
"version": "1.0",
"author": "Áú»¢¶Ä²©",
"actions": {
"widget.lesson_gauge_chart.view": {
"class": "WidgetView"
}
},
"widget": {
"js_class": "WidgetLessonGaugeChart"
},
"assets": {
"js": ["class.widget.js"]
}
}§¥§à§Ò§Ñ§Ó§Ý§Ö§ß§Ú§Ö §ã§ä§Ú§Ý§Ö§Û CSS §Ó §Ó§Ú§Õ§Ø§Ö§ä
§£ §ï§ä§à§Þ §â§Ñ§Ù§Õ§Ö§Ý§Ö §Ó§í §å§Ù§ß§Ñ§Ö§ä§Ö, §Ü§Ñ§Ü §Õ§à§Ò§Ñ§Ó§Ý§ñ§ä§î §ã§à§Ò§ã§ä§Ó§Ö§ß§ß§í§Ö §ã§ä§Ú§Ý§Ú CSS, §é§ä§à§Ò§í §Ó§Ú§Õ§Ø§Ö§ä §Ó§í§Ô§Ý§ñ§Õ§Ö§Ý §Ò§à§Ý§Ö§Ö §á§â§Ú§Ó§Ý§Ö§Ü§Ñ§ä§Ö§Ý§î§ß§à.
§¥§Ý§ñ §ã§ä§Ú§Ý§Ö§Û §Ó§Ú§Õ§Ø§Ö§ä§à§Ó §ã§à§Ù§Õ§Ñ§Û§ä§Ö §ß§à§Ó§í§Û §Ü§Ñ§ä§Ñ§Ý§à§Ô css §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö assets.
§³§à§Ù§Õ§Ñ§Û§ä§Ö §æ§Ñ§Û§Ý widget.css §Ó §Ü§Ñ§ä§Ñ§Ý§à§Ô§Ö assets/css. §¹§ä§à§Ò§í §ã§ä§Ú§Ý§Ú§Ù§à§Ó§Ñ§ä§î §ï§Ý§Ö§Þ§Ö§ß§ä§í §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ú§ã§á§à§Ý§î§Ù§å§Û§ä§Ö §ã§Ö§Ý§Ö§Ü§ä§à§â div.dashboard-widget-{widget id}. §¹§ä§à§Ò§í §ß§Ñ§ã§ä§â§à§Ú§ä§î CSS §Õ§Ý§ñ §Ó§ã§Ö§Ô§à §Ó§Ú§Õ§Ø§Ö§ä§Ñ, §Ú§ã§á§à§Ý§î§Ù§å§Û§ä§Ö §ã§Ö§Ý§Ö§Ü§ä§à§â form.dashboard-widget-{idget id}
ui/modules/lesson_gauge_chart/assets/css/widget.css
div.dashboard-widget-lesson_gauge_chart {
display: grid;
grid-template-rows: 1fr;
padding: 0;
}
div.dashboard-widget-lesson_gauge_chart .chart {
display: grid;
align-items: center;
justify-items: center;
}
div.dashboard-widget-lesson_gauge_chart .chart canvas {
background: white;
}
div.dashboard-widget-lesson_gauge_chart .description {
padding-bottom: 8px;
font-size: 1.750em;
line-height: 1.2;
text-align: center;
}
.dashboard-grid-widget-hidden-header div.dashboard-widget-lesson_gauge_chart .chart {
margin-top: 8px;
}- §°§ä§Ü§â§à§Û§ä§Ö manifest.json §Ú §Õ§à§Ò§Ñ§Ó§î§ä§Ö §Ú§Þ§ñ §æ§Ñ§Û§Ý§Ñ CSS (widget.css) §Ó §Þ§Ñ§ã§ã§Ú§Ó §Ó §â§Ñ§Ù§Õ§Ö§Ý§Ö assets/css. §¿§ä§à §á§à§Ù§Ó§à§Ý§Ú§ä §ã§ä§Ú§Ý§ñ§Þ CSS, §à§á§â§Ö§Õ§Ö§Ý§Ö§ß§ß§í§Þ §Ó widget.css, §Ù§Ñ§Ô§â§å§Ø§Ñ§ä§î§ã§ñ §Ó§Þ§Ö§ã§ä§Ö §ã§à §ã§ä§â§Ñ§ß§Ú§è§Ö§Û §á§Ñ§ß§Ö§Ý§Ú.
ui/modules/lesson_gauge_chart/manifest.json
{
"manifest_version": 2.0,
"id": "lesson_gauge_chart",
"type": "widget",
"name": "Gauge chart",
"namespace": "LessonGaugeChart",
"version": "1.0",
"author": "Áú»¢¶Ä²©",
"actions": {
"widget.lesson_gauge_chart.view": {
"class": "WidgetView"
}
},
"widget": {
"js_class": "WidgetLessonGaugeChart"
},
"assets": {
"css": ["widget.css"],
"js": ["class.widget.js"]
}
}- §°§Ò§ß§à§Ó§Ú§ä§Ö §ã§ä§â§Ñ§ß§Ú§è§å §á§Ñ§ß§Ö§Ý§Ú, §é§ä§à§Ò§í §å§Ó§Ú§Õ§Ö§ä§î §Ô§à§ä§à§Ó§å§ð §Ó§Ö§â§ã§Ú§ð §Ó§Ú§Õ§Ø§Ö§ä§Ñ.