@netdata/charts
Version:
Netdata frontend SDK and chart utilities
94 lines • 4.63 kB
JavaScript
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { trigger, getArea } from "./helpers";
var getTimestampPosition = function getTimestampPosition(dygraph, timestamp) {
var _dygraph$xAxisRange = dygraph.xAxisRange(),
_dygraph$xAxisRange2 = _slicedToArray(_dygraph$xAxisRange, 2),
after = _dygraph$xAxisRange2[0],
before = _dygraph$xAxisRange2[1];
var timestampMs = timestamp * 1000;
if (timestampMs < after || timestampMs > before) return null;
var x = dygraph.toDomXCoord(timestampMs);
return {
x: x,
timestampMs: timestampMs
};
};
var drawAnnotationLine = function drawAnnotationLine(ctx, x, height, color) {
var isDraft = arguments.length > 4 && arguments[4] !== undefined ? arguments[4] : false;
var isSynced = arguments.length > 5 && arguments[5] !== undefined ? arguments[5] : false;
ctx.beginPath();
if (isDraft || isSynced) ctx.setLineDash([5, 5]);
ctx.moveTo(x, 0);
ctx.lineTo(x, height);
ctx.lineWidth = 1;
ctx.strokeStyle = color;
ctx.globalAlpha = isSynced ? 0.7 : 1;
ctx.stroke();
ctx.globalAlpha = 1;
if (isDraft || isSynced) ctx.setLineDash([]);
};
export default (function (chartUI, id) {
var draftAnnotation = chartUI.chart.getAttribute("draftAnnotation");
if (id === "draftAnnotation" && draftAnnotation) {
var _timestamp = draftAnnotation.timestamp;
var _color = "#888888";
if (!_timestamp) return;
var _dygraph = chartUI.getDygraph();
var _dygraph$getArea = _dygraph.getArea(),
_h = _dygraph$getArea.h;
var _ctx = _dygraph.hidden_ctx_;
var _pos = getTimestampPosition(_dygraph, _timestamp);
if (!_pos) return;
var _x = _pos.x;
var _area = {
from: _x,
to: _x,
width: 0
};
trigger(chartUI, id, _area);
_ctx.save();
drawAnnotationLine(_ctx, _x, _h, _color, true);
_ctx.beginPath();
_ctx.arc(_x, 0, 2, 0, 1 * Math.PI);
_ctx.strokeStyle = _color;
_ctx.lineWidth = 1;
_ctx.stroke();
_ctx.restore();
return;
}
var overlays = chartUI.chart.getAttribute("overlays");
var annotation = overlays[id];
if (!annotation || annotation.type !== "annotation") return;
var timestamp = annotation.timestamp,
_annotation$color = annotation.color,
color = _annotation$color === void 0 ? "#ff6b6b" : _annotation$color,
_annotation$position = annotation.position,
position = _annotation$position === void 0 ? "top" : _annotation$position,
originallyFrom = annotation.originallyFrom;
var isSynced = !!originallyFrom;
if (!timestamp) return;
var dygraph = chartUI.getDygraph();
var _dygraph$getArea2 = dygraph.getArea(),
h = _dygraph$getArea2.h;
var ctx = dygraph.hidden_ctx_;
var pos = getTimestampPosition(dygraph, timestamp);
if (!pos) return trigger(chartUI, id);
var area = getArea(dygraph, [timestamp, timestamp]);
if (!area) return trigger(chartUI, id);
trigger(chartUI, id, area);
var x = pos.x;
ctx.save();
drawAnnotationLine(ctx, x, h, color, false, isSynced);
ctx.beginPath();
ctx.arc(x, position === "top" ? 0 : h, 2, 0, 1 * Math.PI);
ctx.fillStyle = color;
ctx.globalAlpha = isSynced ? 0.7 : 1;
ctx.fill();
ctx.globalAlpha = 1;
ctx.restore();
});