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

**/

​

​

class ZSparkline extends HTMLElement {

​

    static ZBX_STYLE_CLASS =        'svg-sparkline';

    static ZBX_STYLE_CLASS_LINE =   'svg-sparkline-line';

    static ZBX_STYLE_CLASS_AREA =   'svg-sparkline-area';

​

    static PADDING_VERTICAL = 2;

​

    static DEFAULT_COLOR = '#42A5F5';

    static DEFAULT_FILL = 3;

    static DEFAULT_LINE_WIDTH = 1;

​

    #container;

    #svg;

    #line;

    #area;

​

    #width;

    #height;

    #color;

    #line_width;

    #fill;

    #points;

    #time_period;

​

    #xAccessor = value => value.x;

    #yAccessor = value => value.y;

​

    #xScale;

    #yScale;

​

    #areaGenerator;

    #lineGenerator;

​

    #events;

    #events_data;

​

    constructor() {

        super();

    }

​

    connectedCallback() {

        customElements.whenDefined('z-sparkline').then(() => {

            if (this.#container !== undefined) {

                return;

            }

​

            this.#container = d3.select(this);

​

            this.#width = parseFloat(this.#container.attr('width')) || this.offsetWidth;

            this.#height = parseFloat(this.#container.attr('height')) || this.offsetHeight;

​

            const color = this.#container.attr('color');

            this.#color = isColorHex(color) ? color : ZSparkline.DEFAULT_COLOR;

​

            const line_width = parseInt(this.#container.attr('line-width'));

            this.#line_width = !isNaN(line_width) ? line_width : ZSparkline.DEFAULT_LINE_WIDTH;

​

            const fill = parseInt(this.#container.attr('fill'));

            this.#fill = !isNaN(fill) ? fill : ZSparkline.DEFAULT_FILL;

​

            this.#points = ZSparkline.#parsePoints(this.#container.attr('value'));

​

            this.#time_period = {

                from: parseInt(this.#container.attr('time-period-from')) || d3.min(this.#points, this.#xAccessor),

                to: parseInt(this.#container.attr('time-period-to')) || d3.max(this.#points, this.#xAccessor)

            };

​

            this.#xScale = d3.scaleTime().domain(this.#getXScaleDomain()).range(this.#getXScaleRange());

            this.#yScale = d3.scaleLinear().domain(this.#getYScaleDomain()).range(this.#getYScaleRange());

​

            this.#areaGenerator = d3.area()

                .x(d => this.#xScale(this.#xAccessor(d)))

                .y1(d => this.#yScale(this.#yAccessor(d)))

                .defined(d => !isNaN(this.#yAccessor(d)));

​