{
            "manifest_version": 2.0,
            "id": "lesson_gauge_chart",
            "type": "widget",
            "name": "Gauge chart",
            "namespace": "LessonGaugeChart",
            "version": "1.1","author": "Zabbix"
       }

<?php
       
       /**
        * Приказ виџета мерача.
        *
        * @var CView $this
        * @var array $data
        */
       
       (new CWidgetView($data))
           ->addItem(new CTag('h1', true, 'Hello, world!')
           )
           ->show();

<?php
       
       namespace Modules\LessonGaugeChart\Includes;
       
       use Zabbix\Widgets\CWidgetForm;
       
       class WidgetForm extends CWidgetForm {CWidgetFieldTextBox
       }

<?php
       
       namespace Modules\LessonGaugeChart\Includes;
       
       use Zabbix\Widgets\CWidgetForm;
       
       use Zabbix\Widgets\Fields\CWidgetFieldTextBox;
       
       class WidgetForm extends CWidgetForm {
       
           public function addFields(): self {
               return $this
                   ->addField(
                      new CWidgetFieldTextBox('description', _('Description'))))
                   );
          }
       }

<?php
       
       /**
        * Gauge chart widget form view.
        *
        * @var CView $this
        * @var array $data
        */
       
       (new CWidgetFormView($data))
           ->addField(
               new CWidgetFieldTextBoxView($data['fields']['description'])
           )
           ->show();

<?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_version": 2.0,
           "id": "lesson_gauge_chart",
           "type": "widget",
           "name": "Gauge chart",
           "namespace": "LessonGaugeChart",
           "version": "1.0",
           "author": "Zabbix",
           "actions": {
               "widget.lesson_gauge_chart.view": {
                   "class": "WidgetView"
               }
           }
       }

<?php
       
       /**
        * Gauge chart widget view.
        *
        * @var CView $this
        * @var array $data
        */
       
       (new CWidgetView($data))
           ->addItem(
               new CTag('h1', true, $data['description'])
           )
           ->show();

<?php
       
       namespace Modules\LessonGaugeChart\Includes;
       
       use Zabbix\Widgets\{
            CWidgetField,
            CWidgetForm
       };
       
       use Zabbix\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'))
         );
         }
       }

<?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();

<?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()
                   ]
               ]));
           }
       }

<?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();

<?php
       
       namespace Modules\LessonGaugeChart;
       
       use Zabbix\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')
                   ]
               ];
           }
       }

<?php
       
       namespace Modules\LessonGaugeChart\Includes;
       
       use Modules\LessonGaugeChart\Widget;
       
       use Zabbix\Widgets\{
           CWidgetField,
           CWidgetForm
       };
       
       use Zabbix\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'))
                   );
           }
       }

<?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();

<?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 ?>;
          }
       };

<?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();

<?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()
           ]
           ]));
           }
       }

<?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();

    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_version": 2.0,
           "id": "lesson_gauge_chart",
           "type": "widget",
           "name": "Gauge chart",
           "namespace": "LessonGaugeChart",
           "version": "1.0",
           "author": "Zabbix",
           "actions": {
           "widget.lesson_gauge_chart.view": {
           "class": "WidgetView"
           }
           },
           "widget": {
           "js_class": "WidgetLessonGaugeChart"
           },
           "assets": {
           "js": ["class.widget.js"]
           }
       }

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_version": 2.0,
           "id": "lesson_gauge_chart",
           "type": "widget",
           "name": "Gauge chart",
          "namespace": "LessonGaugeChart",
           "version": "1.0",
           "author": "Zabbix",
           "actions": {
               "widget.lesson_gauge_chart.view"": {
                   "class": "WidgetView"
               }
           },
           "widget": {
               "js_class": "WidgetLessonGaugeChart"
           },
           "assets": {
               "css": ["widget.css"],
               "js": ["class.widget.js"]
           }
       }