Zabbix

/*

** Copyright (C) 2001-2025 Zabbix SIA

**

** This program is free software: you can redistribute it and/or modify it under the terms of

** the GNU Affero General Public License as published by the Free Software Foundation, version 3.

**

** This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY;

** without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.

** See the GNU Affero General Public License for more details.

**

** You should have received a copy of the GNU Affero General Public License along with this program.

** If not, see <https://www.gnu.org/licenses/>.

**/

​

​

const BAR_GAUGE_BAR_DEFAULT_COLOR = '#000000';

const BAR_GAUGE_BAR_DEFAULT_MIN = 0;

const BAR_GAUGE_BAR_DEFAULT_MAX = 100;

const BAR_GAUGE_BAR_ITEM_WIDTH = 7;

​

class ZBarGauge extends HTMLElement {

​

    constructor() {

        super();

​

        this._refresh_frame = null;

​

        this._fill = BAR_GAUGE_BAR_DEFAULT_COLOR;

        this._solid = false;

        this._min = 0;

        this._max = 100;

        this._value = 0;

​

        const shadow = this.attachShadow({mode: 'open'});

​

        this._canvas = document.createElement('canvas');

        this._canvas.setAttribute('part', 'bar');

        shadow.appendChild(this._canvas);

​

        this.registerEvents();

    }

​

    connectedCallback() {

        setTimeout(() => {

            this._events.update();

        });

    }

​

    disconnectedCallback() {

        this.unregisterEvents();

    }

​

    static get observedAttributes() {

        return ['fill', 'max', 'min', 'solid', 'value', 'width'];

    }

​

    attributeChangedCallback(name, old_value, new_value) {

        if (old_value === new_value) {

            return;

        }

​

        switch (name) {

            case 'fill':

                this._fill = (new_value !== null && /^#([0-9A-F]{6})$/i.test(new_value))

                    ? new_value

                    : BAR_GAUGE_BAR_DEFAULT_COLOR;

​

                return this._events.update();

​

            case 'max':

                this._max = new_value !== null && !isNaN(new_value) ? Number(new_value) : BAR_GAUGE_BAR_DEFAULT_MAX;

                break

​

            case 'min':

                this._min = new_value !== null && !isNaN(new_value) ? Number(new_value) : BAR_GAUGE_BAR_DEFAULT_MIN;

                break;

​

            case 'solid':

                this._solid = new_value !== null;

                break;

​

            case 'value':

                if (new_value !== null) {

                    this._value = Number(new_value);

​

                    this.dispatchEvent(new Event('change', {bubbles: true}));

                }

                break;

​

            case 'width':

                if (new_value === null) {