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 + ': ' + y + ' ' + data[i].axisY.suffix + "
"; 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('
'); } } 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; } }