Zabbix

<?php declare(strict_types = 0);

/*

** 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/>.

**/

​

​

use Widgets\SvgGraph\Includes\CWidgetFieldDataSet;

​

?>

​

window.widget_svggraph_form = new class {

​

    /**

     * @type {Map<HTMLLIElement, CSortable>}

     */

    #single_items_sortable = new Map();

​

    /**

     * @type {number}

     */

    #dataset_row_unique_id = 0;

​

    init({form_tabs_id, color_palette, templateid}) {

        colorPalette.setThemeColors(color_palette);

​

        this._$overlay_body = jQuery('.overlay-dialogue-body');

        this._form = document.getElementById('widget-dialogue-form');

        this._templateid = templateid;

        this._dataset_wrapper = document.getElementById('data_sets');

        this._any_ds_aggregation_function_enabled = false;

​

        this.#dataset_row_unique_id =

            this._dataset_wrapper.querySelectorAll('.<?= ZBX_STYLE_LIST_ACCORDION_ITEM ?>').length;

​

        this._$overlay_body.on('scroll', () => {

            const $preview = jQuery('.<?= ZBX_STYLE_SVG_GRAPH_PREVIEW ?>', this._$overlay_body);

​

            if (!$preview.length) {

                this._$overlay_body.off('scroll');

                return;

            }

​

            if ($preview.offset().top < this._$overlay_body.offset().top && this._$overlay_body.height() > 400) {

                jQuery('#svg-graph-preview').css('top',

                    this._$overlay_body.offset().top - $preview.offset().top

                );

                jQuery('.graph-widget-config-tabs .ui-tabs-nav').css('top', $preview.height());

            }

            else {

                jQuery('#svg-graph-preview').css('top', 0);

                jQuery('.graph-widget-config-tabs .ui-tabs-nav').css('top', 0);

            }

        });

​

        jQuery(`#${form_tabs_id}`)

            .on('tabsactivate', () => jQuery.colorpicker('hide'))

            .on('change', 'input, z-select, .multiselect', () => this.onGraphConfigChange());

​

        this._datasetTabInit();

        this._problemsTabInit();

​

        this.onGraphConfigChange();

    }

​

    onGraphConfigChange() {

        this._updateForm();

        this._updatePreview();

    }

​

    updateVariableOrder(obj, row_selector, var_prefix) {

        for (const k of [10000, 0]) {

            jQuery(row_selector, obj).each(function(i) {

                if (var_prefix === 'ds') {

                    jQuery(this).attr('data-set', i);

                    jQuery('.single-item-table', this).attr('data-set', i);

                }

​

                jQuery('.multiselect[data-params]', this).each(function() {

                    const name = jQuery(this).multiSelect('getOption', 'name');

​

                    if (name !== null) {