411 lines
26 KiB
HTML
411 lines
26 KiB
HTML
<!--
|
||
yunkong2.vis history widgets
|
||
|
||
version: "0.2.6"
|
||
|
||
Copyright 2016 bluefox<dogafox@gmail.com>
|
||
|
||
-->
|
||
<script type="text/javascript" src="widgets/history/lib/js/jquery.sparkline.min.js"></script>
|
||
|
||
<script type="text/javascript">
|
||
'use strict';
|
||
if (vis.editMode) {
|
||
// Add words for basic widgets
|
||
$.extend(true, systemDictionary, {
|
||
"format_date": {"en": "Dateformat", "de": "Datumformat", "ru": "Формат даты"},
|
||
"format_date_tooltip": {
|
||
"en": "Dateformat",
|
||
"de": "Datumformat",
|
||
"ru": "Формат даты"
|
||
},
|
||
"1 second": {"en": "1 second", "de": "1 Sekunde", "ru": "1 секунда"},
|
||
"10 seconds": {"en": "10 seconds", "de": "10 Sekunden", "ru": "10 секунд"},
|
||
"30 seconds": {"en": "30 seconds", "de": "30 Sekunden", "ru": "30 секунд"},
|
||
"1 minute": {"en": "1 minute", "de": "1 Minute", "ru": "1 минута"},
|
||
"2 minutes": {"en": "2 minutes", "de": "2 Minuten", "ru": "2 минуты"},
|
||
"5 minutes": {"en": "5 minutes", "de": "5 Minuten", "ru": "5 минут"},
|
||
"10 minutes": {"en": "10 minutes", "de": "10 Minuten", "ru": "10 минут"},
|
||
"30 minutes": {"en": "30 minutes", "de": "30 Minuten", "ru": "30 минут"},
|
||
"1 hour": {"en": "1 hour", "de": "1 Stunde", "ru": "1 час"},
|
||
"2 hours": {"en": "2 hours", "de": "2 Stunden", "ru": "2 часа"},
|
||
"4 hours": {"en": "4 hours", "de": "4 Stunden", "ru": "4 часа"},
|
||
"8 hours": {"en": "8 hours", "de": "8 Stunden", "ru": "8 часов"},
|
||
"12 hours": {"en": "12 hours", "de": "12 Stunden", "ru": "12 часов"},
|
||
"24 hours": {"en": "24 hours", "de": "24 Stunden", "ru": "24 часа"},
|
||
"instance": {"en": "history instance", "de": "Historyinstanz", "ru": "Экземпляр"},
|
||
"group_advanced": {"en": "Advanced", "de": "Erweitert", "ru": "Дополнительно"},
|
||
"max_lines": {"en": "Max. event amount", "de": "max. Ereignisse", "ru": "Макс. кол-во событий"},
|
||
"time_interval_min": {"en": "Not older than", "de": "Nicht älter als", "ru": "Не позже чем"},
|
||
"timeAsInterval": {"en": "Time as interval", "de": "Zeit als Intervall", "ru": "Время, как интервал"},
|
||
"inverseOrder": {"en": "Inverse order", "de": "Reihenfolge invertieren", "ru": "Обратный порядок"},
|
||
"group_columns": {"en": "Columns", "de": "Spalten", "ru": "Колонки"},
|
||
"table_attr": {"en": "Table CSS style", "de": "CSS Stil - Tabelle", "ru": "Таблица - CSS стиль"},
|
||
"header_attr": {"en": "Header CSS style", "de": "CSS Stil - Beschriftung", "ru": "Заголовок - CSS стиль"},
|
||
"time_name": {"en": "Time - name", "de": "Zeit - Name", "ru": "Время - имя"},
|
||
"time_hide": {"en": "Time - hide", "de": "Zeit - nicht zeigen", "ru": "Время - скрыть"},
|
||
"time_width": {"en": "Time - width", "de": "Zeit - Breite", "ru": "Время - ширина"},
|
||
"time_attr": {"en": "Time - CSS style", "de": "Zeit - CSS Stil", "ru": "Время - CSS стиль"},
|
||
"time_unit": {"en": "Time - suffix", "de": "Zeit - Suffix", "ru": "Время - суффикс"},
|
||
"val_name": {"en": "Val- name", "de": "Wert - Name", "ru": "Значение - имя"},
|
||
"val_hide": {"en": "Val - hide", "de": "Wert - nicht zeigen", "ru": "Значение - скрыть"},
|
||
"val_width": {"en": "Val - width", "de": "Wert - Breite", "ru": "Значение - ширина"},
|
||
"val_attr": {"en": "Val - CSS style", "de": "Wert - CSS Stil", "ru": "Значение - CSS стиль"},
|
||
"val_unit": {"en": "Val - units", "de": "Wert - Einheit", "ru": "Значение - единицы"},
|
||
"from_name": {"en": "From - name", "de": "Von - Name", "ru": "От - имя"},
|
||
"from_hide": {"en": "From - hide", "de": "Von - nicht zeigen", "ru": "От - скрыть"},
|
||
"from_width": {"en": "From - width", "de": "Von - Breite", "ru": "От - ширина"},
|
||
"from_attr": {"en": "From - CSS style", "de": "Von - CSS Stil", "ru": "От - CSS стиль"},
|
||
"from_unit": {"en": "From - suffix", "de": "Von - Suffix", "ru": "От - суффикс"},
|
||
"average": {"en": "average", "de": "Mittelwert", "ru": "среднее"},
|
||
"total": {"en": "total", "de": "Summe", "ru": "сумма"},
|
||
"line": {"en": "line", "de": "Linie", "ru": "Линия"},
|
||
"aggregate": {"en": "Aggregation", "de": "Aggregation", "ru": "Аггрегирование"},
|
||
"chartType": {"en": "chartType", "de": "Charttyp", "ru": "Тип графика"},
|
||
"points": {"en": "points", "de": "Anzahl Werten", "ru": "Кол-во точек"},
|
||
"time_interval": {"en": "Time interval", "de": "Zeitintervall", "ru": "Интервал"},
|
||
"group_line": {"en": "Line", "de": "Linie-Chart", "ru": "Линия"},
|
||
"lineColor": {"en": "Line color", "de": "Linie-Farbe", "ru": "Цвет линии"},
|
||
"fillColor": {"en": "Fill color", "de": "Füllfarbe", "ru": "Цвет заливки"},
|
||
"lineWidth": {"en": "Line width", "de": "Liniendicke", "ru": "Ширина линии"},
|
||
"group_bar": {"en": "Bar", "de": "Bar-Chart", "ru": "Столбцы"},
|
||
"barColor": {"en": "Positive color", "de": "Positivfarbe", "ru": "Цвет положительных столбцов"},
|
||
"negBarColor": {"en": "negative color", "de": "Negativfarbe", "ru": "Цвет отрицательных столбцов"},
|
||
"zeroColor": {"en": "Zero color", "de": "0-Farbe", "ru": "Цвер нулевых значений"},
|
||
"barSpacing": {"en": "Bar's spacing", "de": "Abstand", "ru": "Расстояние между столбцами"},
|
||
"disableTooltips": {"en": "Hide tooltips", "de": "Kein Tooltips", "ru": "Нет подсказки"},
|
||
"history": {"en": "history", "de": "history", "ru": "history"}
|
||
});
|
||
}
|
||
|
||
vis.binds.history = {
|
||
version: "0.2.6",
|
||
showVersion: function () {
|
||
if (vis.binds.history.version) {
|
||
console.log('Version vis-history: ' + vis.binds.history.version);
|
||
vis.binds.history.version = null;
|
||
}
|
||
},
|
||
updateWidgets: [],
|
||
updateIntervalTimer: null,
|
||
startIntervalUpdate: function () {
|
||
if (vis.editMode) return;
|
||
if (vis.binds.history.updateWidgets.length && !vis.binds.history.updateIntervalTimer) {
|
||
vis.binds.history.updateIntervalTimer = setInterval(vis.binds.history.updateInterval, 30000);
|
||
} else if (!vis.binds.history.updateWidgets.length && vis.binds.history.updateIntervalTimer) {
|
||
clearInterval(vis.binds.history.updateIntervalTimer);
|
||
vis.binds.history.updateIntervalTimer = null;
|
||
}
|
||
},
|
||
updateInterval: function () {
|
||
for (var wid = 0; wid < vis.binds.history.updateWidgets.length; wid++) {
|
||
vis.binds.history.eventList.update($('#' + vis.binds.history.updateWidgets[wid]).find('.vis-widget-body'));
|
||
}
|
||
},
|
||
eventList: {
|
||
intervals: {
|
||
'1 second': 1000,
|
||
'10 seconds': 10000,
|
||
'30 seconds': 30000,
|
||
'1 minute': 60000,
|
||
'2 minutes': 120000,
|
||
'5 minutes': 300000,
|
||
'10 minutes': 600000,
|
||
'30 minutes': 1800000,
|
||
'1 hour': 3600000,
|
||
'2 hours': 7200000,
|
||
'4 hours': 14400000,
|
||
'8 hours': 28800000,
|
||
'12 hours': 43200000,
|
||
'24 hours': 86400000
|
||
|
||
},
|
||
header: function (data) {
|
||
var text = data.title ? '<div style="text-align: center; width: 100%;' + (data.title_attr || '') + '">' + data.title + '</div>' : '';
|
||
text += '<table class="vis-no-spaces">\n';
|
||
var table_attr = (data.table_attr || '');
|
||
var attrTime = (data.time_width ? 'width: ' + data.time_width + 'px;' : '');
|
||
var attrVal = (data.val_width ? 'width: ' + data.val_width + 'px;' : '');
|
||
var attrFrom = (data.from_width ? 'width: ' + data.from_width + 'px;' : '');
|
||
|
||
if ((!data.time_hide && data.time_name) ||
|
||
(!data.val_hide && data.val_name) ||
|
||
(!data.from_hide && data.from_name)) {
|
||
text += '<tr style="' + (data.header_attr || '') + ';' + table_attr + '">';
|
||
if (!data.time_hide) text += '<th style="' + attrTime + table_attr + '">' + (data.time_name || '') + '</th>';
|
||
if (!data.val_hide) text += '<th style="' + attrVal + table_attr + '">' + (data.val_name || '') + '</th>';
|
||
if (!data.from_hide) text += '<th style="' + attrFrom + table_attr + '">' + (data.from_name || '') + '</th>';
|
||
attrTime = '';
|
||
attrVal = '';
|
||
attrFrom = '';
|
||
}
|
||
return {text: text, attrTime: attrTime, attrVal: attrVal, attrFrom: attrFrom, table_attr: table_attr};
|
||
},
|
||
renderLine: function (header, data, result, line) {
|
||
var resLine = result[line] || {val: ' ', from: ' '};
|
||
var text = '<tr style="' + header.table_attr + '">';
|
||
var time;
|
||
if (resLine.ts) {
|
||
time = data.timeAsInterval ? vis.binds.basic.getTimeInterval(resLine.ts) : vis.binds.basic.formatDate(resLine.ts, data.format_date);
|
||
} else {
|
||
time = ' ';
|
||
}
|
||
|
||
if (time !== ' ' && data.time_unit) time += data.time_unit;
|
||
if (data.val_unit && resLine.val !== ' ' && resLine.val !== null && resLine.val !== undefined && resLine.val !== '') resLine.val += data.val_unit;
|
||
if (data.from_unit && resLine.from !== ' ' && resLine.from !== null && resLine.from !== undefined && resLine.from !== '') resLine.from += data.from_unit;
|
||
|
||
if (!data.time_hide) text += '<td style="' + header.attrTime + (data.time_attr || '') + ';' + header.table_attr + '">' + time + '</td>';
|
||
if (!data.val_hide) {
|
||
if (resLine.val && typeof resLine.val === 'string' && resLine.val.match(/https?:\/\//)) resLine.val = '<a href="' + resLine.val + '" target="eventList">' + resLine.val.split('/').pop() + '</a>';
|
||
text += '<td style="' + header.attrVal + (data.val_attr || '') + ';' + header.table_attr + '">' + resLine.val + '</td>';
|
||
}
|
||
if (!data.from_hide) text += '<td style="' + header.attrFrom + (data.from_attr || '') + ';' + header.table_attr + '">' + (resLine.from || '') + '</td>';
|
||
|
||
text += '</tr>\n';
|
||
return text;
|
||
},
|
||
update: function ($div) {
|
||
var data = $div.data('options');
|
||
if (!data.oid || !data.instance) {
|
||
var header = vis.binds.history.eventList.header(data);
|
||
if (data.max_lines) {
|
||
for (var e = 0; e < data.max_lines; e++) {
|
||
header.text += vis.binds.history.eventList.renderLine(header, data, [], e);
|
||
}
|
||
}
|
||
header.text += '</table>';
|
||
$div.html(header.text);
|
||
} else {
|
||
vis.getHistory(data.oid, {
|
||
instance: data.instance,
|
||
count: parseInt(data.max_lines, 10) || 10,
|
||
aggregate: 'none',
|
||
from: !data.from_hide,
|
||
start: vis.binds.history.eventList.intervals[data.time_interval_min] ? new Date().getTime() - vis.binds.history.eventList.intervals[data.time_interval_min] : undefined,
|
||
timeout: 2000
|
||
}, function (err, result) {
|
||
var e;
|
||
if (err) console.log(err);
|
||
if (result && result.length) {
|
||
var header = vis.binds.history.eventList.header(data);
|
||
var cnt = 0;
|
||
if (data.inverseOrder) {
|
||
for (e = 0; e < result.length; e++) {
|
||
header.text += vis.binds.history.eventList.renderLine(header, data, result, e);
|
||
if (data.max_lines && ++cnt >= data.max_lines) break;
|
||
}
|
||
} else {
|
||
for (e = result.length - 1; e >= 0; e--) {
|
||
header.text += vis.binds.history.eventList.renderLine(header, data, result, e);
|
||
if (data.max_lines && ++cnt >= data.max_lines) break;
|
||
}
|
||
}
|
||
|
||
if (data.max_lines) {
|
||
for (e = result.length; e < data.max_lines; e++) {
|
||
header.text += vis.binds.history.eventList.renderLine(header, data, result, e);
|
||
}
|
||
}
|
||
header.text += '</table>';
|
||
$div.html(header.text);
|
||
} else {
|
||
var header = vis.binds.history.eventList.header(data);
|
||
header.text += '<tr><td colspan="3">' + (err || _('no data')) + '</td></tr>';
|
||
if (data.max_lines) {
|
||
for (e = 1; e < data.max_lines; e++) {
|
||
header.text += vis.binds.history.eventList.renderLine(header, data, [], e);
|
||
}
|
||
}
|
||
header.text += '</table>';
|
||
$div.html(header.text);
|
||
}
|
||
});
|
||
}
|
||
},
|
||
init: function (el, view, data) {
|
||
var $div = $(el);
|
||
|
||
var _data = {};
|
||
for (var s in data) {
|
||
if (s[0] !== '_' && data.hasOwnProperty(s) && typeof data[s] !== 'object' && typeof data[s] !== 'function') {
|
||
_data[s] = data[s];
|
||
}
|
||
}
|
||
data = null;
|
||
$div.data('options', _data);
|
||
|
||
if (_data.oid && _data.instance) {
|
||
if (_data.timeAsInterval && vis.binds.history.updateWidgets.indexOf(_data.wid) === -1) {
|
||
vis.binds.history.updateWidgets.push(_data.wid);
|
||
vis.binds.history.startIntervalUpdate();
|
||
}
|
||
|
||
vis.states.bind(_data.oid + '.val', function () {
|
||
vis.binds.history.eventList.update($div);
|
||
});
|
||
}
|
||
vis.binds.history.eventList.update($div);
|
||
}
|
||
},
|
||
sparkLine: {
|
||
update: function ($div) {
|
||
var data = $div.data('options');
|
||
if (!data.oid || !data.instance) {
|
||
$div.sparkline([0,0], {
|
||
width: $div.width(),
|
||
height: $div.height(),
|
||
lineColor: data.lineColor,
|
||
fillColor: data.fillColor,
|
||
chartRangeMin: data.min === '' || data.min === null || data.min === 'undefined' ? undefined : parseFloat(data.min),
|
||
chartRangeMax: data.max === '' || data.max === null || data.max === 'undefined' ? undefined : parseFloat(data.max),
|
||
lineWidth: parseInt(data.lineWidth, 10) || 1
|
||
});
|
||
} else {
|
||
vis.getHistory(data.oid, {
|
||
instance: data.instance,
|
||
count: parseInt(data.points, 10) || 10,
|
||
step: parseInt(data.time_interval_min, 10) || 60000,
|
||
aggregate: data.aggregate || 'average',
|
||
start: vis.binds.history.eventList.intervals[data.time_interval] ? new Date().getTime() - vis.binds.history.eventList.intervals[data.time_interval] : undefined,
|
||
end: new Date().getTime() + 5000,
|
||
timeout: 2000
|
||
}, function (err, result) {
|
||
var data = $div.data('options');
|
||
if (err) console.log(err);
|
||
if (result && result.length) {
|
||
var values = [];
|
||
for (var i = 0; i < result.length; i++) {
|
||
values.push(result[i].val)
|
||
}
|
||
var barWidth = $div.width() / result.length - (parseFloat(data.barSpacing) || 1);
|
||
|
||
$div.sparkline(values, {
|
||
type: data.chartType || 'line',
|
||
width: $div.width(),
|
||
height: $div.height(),
|
||
lineColor: data.lineColor || undefined,
|
||
barColor: data.barColor || undefined,
|
||
negBarColor: data.negBarColor || undefined,
|
||
zeroColor: data.zeroColor || undefined,
|
||
fillColor: data.fillColor || undefined,
|
||
barWidth: barWidth,
|
||
disableTooltips: data.disableTooltips || undefined,
|
||
barSpacing: parseFloat(data.barSpacing) || 1,
|
||
chartRangeMin: data.min === '' || data.min === null || data.min === 'undefined' ? undefined : parseFloat(data.min),
|
||
chartRangeMax: data.max === '' || data.max === null || data.max === 'undefined' ? undefined : parseFloat(data.max),
|
||
lineWidth: parseInt(data.lineWidth, 10) || 1
|
||
});
|
||
} else {
|
||
$div.sparkline([0,0], {
|
||
width: $div.width(),
|
||
height: $div.height(),
|
||
lineColor: data.lineColor || undefined,
|
||
fillColor: data.fillColor || undefined,
|
||
chartRangeMin: data.min === '' || data.min === null || data.min === 'undefined' ? undefined : parseFloat(data.min),
|
||
chartRangeMax: data.max === '' || data.max === null || data.max === 'undefined' ? undefined : parseFloat(data.max),
|
||
lineWidth: parseInt(data.lineWidth, 10) || 1
|
||
});
|
||
}
|
||
});
|
||
}
|
||
|
||
},
|
||
init: function (el, view, data) {
|
||
var $div = $(el);
|
||
|
||
var _data = {};
|
||
for (var s in data) {
|
||
if (s[0] !== '_' && data.hasOwnProperty(s) && typeof data[s] !== 'object' && typeof data[s] !== 'function') {
|
||
_data[s] = data[s];
|
||
}
|
||
}
|
||
data = null;
|
||
$div.data('options', _data);
|
||
|
||
if (_data.oid && _data.instance) {
|
||
vis.states.bind(_data.oid + '.val', function () {
|
||
vis.binds.history.sparkLine.update($div);
|
||
});
|
||
// update every x seconds
|
||
if (!vis.editMode) {
|
||
$div.data('timer', setInterval(function () {
|
||
vis.binds.history.sparkLine.update($div);
|
||
}, parseInt(vis.binds.history.eventList.intervals[_data.time_interval] / (parseInt(_data.points, 10) || 10), 10)));
|
||
}
|
||
}
|
||
vis.binds.history.sparkLine.update($div);
|
||
}
|
||
}
|
||
};
|
||
|
||
if (vis.editMode) {
|
||
vis.binds.history.onHidChanged = function (widgetID, view, newId, fields) {
|
||
var obj = vis.objects[newId];
|
||
if (!obj || !obj.common) return null;
|
||
var changed = [];
|
||
var actualInstance = vis.views[view].widgets[widgetID].data.instance;
|
||
// Check if actual instance still in options
|
||
var firstInstance = '';
|
||
var found = false;
|
||
var custom = obj.common.custom || obj.common.history;
|
||
for (var h in custom) {
|
||
if (!custom.hasOwnProperty(h)) continue;
|
||
if (custom[h].enabled) {
|
||
if (firstInstance === '') firstInstance = h;
|
||
if (h === actualInstance) {
|
||
found = true;
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
if (!found) {
|
||
changed.push('instance');
|
||
vis.views[view].widgets[widgetID].data.instance = firstInstance;
|
||
}
|
||
return changed.length ? changed : null;
|
||
};
|
||
}
|
||
|
||
vis.binds.history.showVersion();
|
||
</script>
|
||
|
||
<script id="tplHistoryEventList"
|
||
type="text/ejs"
|
||
class="vis-tpl"
|
||
data-vis-set="history"
|
||
data-vis-name="Event list"
|
||
data-vis-type="history"
|
||
data-vis-prev='<img src="widgets/history/img/Prev_tplHistoryEventList.png"></img>'
|
||
data-vis-attrs="oid/hid/onHidChanged;instance/history;"
|
||
data-vis-attrs0="group.advanced;max_lines[6]/slider,1,100,1;time_interval_min/select,none,1 second,10 seconds,30 seconds,1 minute,2 minutes,5 minutes,10 minutes,30 minutes,1 hour,2 hours,4 hours,8 hours,12 hours,24 hours;"
|
||
data-vis-attrs1="format_date[hh:mm:ss.sss]/auto,YYYY.MM.DD hh:mm:ss,DD.MM.YYYY hh:mm:ss,YYYY.MM.DD,DD.MM.YYYY,YYYY/MM/DD hh:mm:ss,YYYY/MM/DD,hh:mm:ss;timeAsInterval/checkbox;inverseOrder/checkbox;"
|
||
data-vis-attrs2="group.columns;table_attr;header_attr;"
|
||
data-vis-attrs3="time_name[Time];time_hide/checkbox;time_width[100]/slider,0,300,1;time_attr;time_unit;"
|
||
data-vis-attrs4="val_name[Value];val_hide/checkbox;val_width/slider,0,300,1;val_attr[text-align: center§];val_unit;"
|
||
data-vis-attrs5="from_name[Form];from_hide[true]/checkbox;from_width/slider,0,300,1;from_attr;from_unit;"
|
||
data-vis-attrs6="class[vis-style-green-gray]/hidden"
|
||
>
|
||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: hidden; width: 210px; height: 170px;" id="<%= this.data.attr('wid') %>">
|
||
<div class="vis-widget-body" <%= (el) -> vis.binds.history.eventList.init(el, this.view, this.data) %>></div>
|
||
</div>
|
||
</script>
|
||
|
||
<script id="tplHistorySparkLIne"
|
||
type="text/ejs"
|
||
class="vis-tpl"
|
||
data-vis-set="history"
|
||
data-vis-name="Sparkline"
|
||
data-vis-type="history"
|
||
data-vis-update-style="true"
|
||
data-vis-prev='<img src="widgets/history/img/Prev_tplHistorySparkLine.png"></img>'
|
||
data-vis-attrs="oid/hid/onHidChanged;instance/history;aggregate[average]/select,average,min,max,total;chartType[line]/select,line,bar;"
|
||
data-vis-attrs0="points[20]/slider,1,100,1;time_interval[10 minutes]/select,1 second,10 seconds,30 seconds,1 minute,2 minutes,5 minutes,10 minutes,30 minutes,1 hour,2 hours,4 hours,8 hours,12 hours,24 hours;;min;max;disableTooltips/checkbox;"
|
||
data-vis-attrs1="group.line;lineColor/color;fillColor/color;lineWidth/slider,1,10,1;"
|
||
data-vis-attrs2="group.bar;barColor/color;negBarColor/color;zeroColor/color;min;max;barSpacing/slider,1,10,1;"
|
||
>
|
||
<div class="vis-widget <%== this.data.attr('class') %>" style="overflow: hidden; width: 210px; height: 170px;" id="<%= this.data.attr('wid') %>">
|
||
<div class="vis-widget-body" <%= (el) -> vis.binds.history.sparkLine.init(el, this.view, this.data) %>></div>
|
||
</div>
|
||
</script>
|