ASCU_ALL/Site/js/AnalogChart.js

class AnalogChart {
    constructor(vdp, tstart, tend) {
        function ValueDateFormatter(e) {
            var hours = 1000 * 60 * 60;
            if (e.trigger === "reset") {
                e.chart.options.axisX.valueFormatString = "MM.DD HH";
            }
            else if (e.trigger === "zoom") {
                //Hour (Comparing Hours)
                if ((((e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum) / (hours)) < 24)) {
                    e.chart.options.axisX.valueFormatString = "HH:mm:ss";
                }
                //Day (Comparing Days)
                else if (((e.axisX.viewportMaximum - e.axisX.viewportMinimum) / (hours)) < 48) {
                    e.chart.options.axisX.valueFormatString = "HH:mm";
                }
                //Year (Comparing Years)
                else if (((e.axisX[0].viewportMaximum - e.axisX[0].viewportMinimum) / (hours * 24)) < 2) {
                    e.chart.options.axisX.valueFormatString = "MM.DD HH";
                }
                else {
                    e.chart.options.axisX.valueFormatString = "MM.DD";
                }
            }
        }
        this._vdp = vdp;
        this._tstart = tstart;
        this._tend = tend;
        this._chart_global = $("#AnalogChart_Global");
        this._chart_checkbox = $("#AnalogChart_Checkbox");
        this._chart_label = $("#AnalogChart_label");
        this._chart_buttonUpdate = $("#AnalogChart_Update");
        var self = this;
        this._chart_buttonUpdate.unbind("click");
        this._chart_buttonUpdate.click(function () {
            self.Update();
        });
        this._chart_conteiner = $("#AnalogChart");
        this._data = [];
        this._axisYList = [
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "кА", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "кПа", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "А", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "В", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "гр.С", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "гр", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "мм", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "мкм.рт.с", logarithmic: true
            },
            {
                labelFontSize: 12, labelAngle: -90,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "м^3/ч", logarithmic: false
            },
            {
                labelFontSize: 12, labelAngle: -80,
                margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                suffix: "кгс/см^2", logarithmic: false
            }
        ];

        this._chart = new CanvasJS.Chart("AnalogChart", {
            toolTip: {
                fontSize: 12,
                shared: true,
                contentFormatter: function (e) {
                    var str = "";
                    if (e.entries.length < 1)
                        return str;
                    var lastdate = e.entries[0].dataPoint.x;
                    var data = e.chart._dataInRenderedOrder;
                    for (var i = 0; i < data.length; i++) {
                        var y = null;

                        for (var j = 0; j < data[i].dataPoints.length; j++) {
                            var t = data[i].dataPoints[j].x - lastdate;
                            if (t <= 0)
                                y = data[i].dataPoints[j].y;
                            else
                                break;
                            t = data[i].dataPoints[(data[i].dataPoints.length - 1) - j].x - lastdate;
                            if (t <= 0) {
                                y = data[i].dataPoints[(data[i].dataPoints.length - 1) - j].y;
                                break;
                            }
                        }
                        var temp =
                            data[i].name + ': <strong style="color:' +
                            data[i].color + ';">' +
                            y + ' </strong>' + data[i].axisY.suffix + "<br/>";
                        str = str.concat(temp);
                    }
                    return (str);
                }
            },
            animationEnabled: true,
            animationDuration: 1000,
            exportFileName: "Analog Signals",
            exportEnabled: true,
            zoomEnabled: true,
            theme: "light1",
            backgroundColor: "#FFFFFF",
            colorSet: "colorSet1",
            culture: "ru",
            title: {},
            legend: {},

            rangeChanging: ValueDateFormatter,
            axisX: {
                labelFontSize: 12,
                margin: 1,
                tickLength: 3,
                tickThickness: 1,
                lineThickness: 1,
                gridThickness: 0.3,
                valueFormatString: "MM.DD HH"
            },
            axisY: [
                {
                    labelFontSize: 12, labelAngle: -90,
                    margin: 1, tickLength: 3, tickThickness: 1, lineThickness: 1, gridThickness: 0.1,
                    suffix: "", logarithmic: false
                }
            ],
            data: []
        });
        var self = this;
    }

    LoadData() {
        this.Clear();
        $("#AnalogChart_Load_Element").show();
        var self = this;

        $.ajax({
            type: "POST",
            url: 'http://' + document.URL.split("/")[2] + '/api/listanalog',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify({
                "vdp": self._vdp
            }),
            success: function (date) {
                self.AddList(date);
                self.Update();
                self.Show();
            },
            complete: function () {
                $("#AnalogChart_Load_Element").hide();
            }
        })
    }

    AddList(d) {
        if (d == undefined || d.length <= 0)
            return;
        for (var i = 0; i < d.length; i++) {
            var data = {
                type: "line",
                markerType: "none",
                name: d[i].sn == undefined ? "" : d[i].sn,
                suffix: d[i].s,
                axisYIndex: -1,
            }
            this._data.push(data);

            var vischk = d[i].v ? 'checked' : '';
            this._chart_checkbox.append('<label class="form-check-label">' +
                '<input type = "checkbox" class= "form-check-input"' + vischk + '>' +
                d[i].fn + '</label><br />');
        }
    }

    Update() {
        this._chart_buttonUpdate.attr('disabled', true);
        while (this._chart.options.axisY.length > 1)
            this._chart.options.axisY.pop();
        while (this._chart.options.data.length > 0)
            this._chart.options.data.pop();
        var chkList = this._chart_checkbox.find('input');
        var sendmass = [];
        for (var i = 0; i < chkList.length; i++) {
            if (chkList[i].checked)
                sendmass.push(i);
        }
        var self = this;
        $.ajax({
            type: "POST",
            url: 'http://' + document.URL.split("/")[2] + '/api/analog',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify({
                "vdp": self._vdp,
                "timeStart": self._tstart,
                "timeEnd": self._tend,
                "signals": sendmass
            }),
            success: function (date) {
                for (var i = 0; i < date.length; i++) {
                    date[i] = self.Hunpack(date[i]);
                }
                var caret = 0;
                var chkList = self._chart_checkbox.find('input');
                for (var i = 0; i < chkList.length; i++) {
                    if (!chkList[i].checked)
                        continue;

                    var d = self._data[i];
                    d.dataPoints = [];
                    for (var j = 0; j < date[caret].length; j++)
                        d.dataPoints.push({
                            x: new Date(date[caret][j].x),
                            y: date[caret][j].y
                        });
                    caret++;

                    var idx = -1;
                    for (var j = 0; j < self._chart.options.axisY.length; j++)
                        if (self._chart.options.axisY[j].suffix == d.suffix)
                            idx = j;
                    if (idx != -1) {
                        d.axisYIndex = idx;
                        self._chart.options.data.push(d);
                        continue;
                    }

                    for (var j = 0; j < self._axisYList.length; j++) {
                        if (self._axisYList[j].suffix == d.suffix)
                            idx = j;
                    }
                    if (idx != -1) {
                        self._chart.options.axisY.push(self._axisYList[idx]);
                        d.axisYIndex = self._chart.options.axisY.length - 1;
                        self._chart.options.data.push(d);
                        continue;
                    }
                    d.axisYIndex = 0;
                    self._chart.options.data.push(d);
                }
                self._chart.render();
            },
            complete: function () {
                self._chart_buttonUpdate.removeAttr('disabled');
                //$("#AnalogChart_Load_Element").hide();
            }
        })
    }

    Show() {
        //this.Update();
        this._chart_global.removeAttr('hidden');
        this._chart_label.removeAttr('hidden');
        this._chart.render();
    }

    Clear() {
        this._data = [];
        this._chart_global.attr('hidden', true);
        this._chart_label.attr('hidden', true);
        this._chart_checkbox.empty();
        this._chart.options.data = [];
    }

    Hunpack(hlist) {
        for (var
            length = hlist.length,
            klength = hlist[0],
            result = Array(((length - klength - 1) / klength) || 0),
            i = 1 + klength,
            j = 0,
            ki, o;
            i < length;
        ) {
            for (
                result[j++] = (o = {}), ki = 0;
                ki < klength;
                o[hlist[++ki]] = hlist[i++]
            );
        }
        return result;
    }
}