@netdata/charts
Version:
Netdata frontend SDK and chart utilities
137 lines (135 loc) • 7.06 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _dygraphs = _interopRequireDefault(require("dygraphs"));
var _throttleDebounce = require("throttle-debounce");
var _limitRange2 = _interopRequireDefault(require("../../../helpers/limitRange"));
var _hoverX = _interopRequireDefault(require("../hoverX"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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; }
var doubleTapDelay = 300;
var _default = exports["default"] = function _default(chartUI) {
var _makeHoverX = (0, _hoverX["default"])(chartUI),
destroy = _makeHoverX.destroy;
var updateNavigation = function updateNavigation(navigation) {
var prevNavigation = arguments.length > 1 && arguments[1] !== undefined ? arguments[1] : chartUI.chart.getAttribute("navigation");
return chartUI.chart.updateAttributes({
navigation: navigation,
prevNavigation: prevNavigation
});
};
var mousedown = function mousedown(event) {
if (event.shiftKey && event.altKey) {
updateNavigation("selectVertical");
return;
}
if (event.altKey) {
updateNavigation("highlight");
return;
}
if (event.shiftKey) {
updateNavigation("select");
return;
}
};
var mouseup = function mouseup() {
setTimeout(function () {
var navigation = chartUI.chart.getAttribute("prevNavigation");
if (navigation) updateNavigation(navigation, null);
});
};
var moveXDebounced = (0, _throttleDebounce.debounce)(500, function (chart, fixedAfter, fixedBefore) {
chart.moveX(fixedAfter, fixedBefore);
});
var onZoom = function onZoom(event, dygraph) {
if (!event.shiftKey && !event.altKey) return;
event.preventDefault();
event.stopPropagation();
var zoom = function zoom(g, zoomInPercentage, bias) {
bias = bias || 0.5;
var _g$xAxisRange = g.xAxisRange(),
_g$xAxisRange2 = _slicedToArray(_g$xAxisRange, 2),
afterAxis = _g$xAxisRange2[0],
beforeAxis = _g$xAxisRange2[1];
var delta = beforeAxis - afterAxis;
var increment = delta * zoomInPercentage;
var afterIncrement = increment * bias,
beforeIncrement = increment * (1 - bias);
var afterSeconds = Math.round((afterAxis + afterIncrement) / 1000);
var beforeSeconds = Math.round((beforeAxis - beforeIncrement) / 1000);
var _limitRange = (0, _limitRange2["default"])({
after: afterSeconds,
before: beforeSeconds
}),
fixedAfter = _limitRange.fixedAfter,
fixedBefore = _limitRange.fixedBefore;
if (fixedAfter * 1000 === afterAxis && fixedBefore * 1000 === beforeAxis) {
return;
}
moveXDebounced(chartUI.chart, fixedAfter, fixedBefore);
dygraph.updateOptions({
dateWindow: [fixedAfter * 1000, fixedBefore * 1000]
});
};
var offsetToPercentage = function offsetToPercentage(g, offsetX) {
var _g$toDomCoords = g.toDomCoords(g.xAxisRange()[0], null),
_g$toDomCoords2 = _slicedToArray(_g$toDomCoords, 1),
axisAfterOffset = _g$toDomCoords2[0];
var x = offsetX - axisAfterOffset;
var w = g.toDomCoords(g.xAxisRange()[1], null)[0] - axisAfterOffset;
// Percentage from the left.
return w === 0 ? 0 : x / w;
};
var normalDef = typeof event.wheelDelta === "number" && !Number.isNaN(event.wheelDelta) ? event.wheelDelta / 40 : event.deltaY * -1.2;
var normal = event.detail ? event.detail * -1 : normalDef;
var percentage = normal / 50;
var offsetX = event.offsetX || event.layerX - event.target.offsetLeft;
var xPct = offsetToPercentage(dygraph, offsetX);
zoom(dygraph, percentage, xPct);
};
var lastTouchEndTime = 0;
var dygraphLastTouchMove = 0;
var dygraphLastTouchPageX = 0;
var touchStart = function touchStart(event, dygraph, context) {
_dygraphs["default"].defaultInteractionModel.touchstart(event, dygraph, context);
context.touchDirections = {
x: true,
y: false
};
dygraphLastTouchMove = 0;
dygraphLastTouchPageX = event.touches[0].pageX || 0;
};
var touchMove = function touchMove(event, dygraph, context) {
_dygraphs["default"].defaultInteractionModel.touchmove(event, dygraph, context);
if (!dygraphLastTouchMove) chartUI.sdk.trigger("panStart", chartUI.chart);
dygraphLastTouchMove = Date.now();
};
var touchEnd = function touchEnd(event, dygraph, context) {
var now = Date.now();
if (now - lastTouchEndTime < doubleTapDelay) {
chartUI.trigger("dblclick", event, dygraph, context);
lastTouchEndTime = now;
return;
}
lastTouchEndTime = now;
_dygraphs["default"].defaultInteractionModel.touchend(event, dygraph, context);
if (dygraphLastTouchMove === 0 && dygraphLastTouchPageX !== 0) {
var _context$initialTouch;
chartUI.chart.updateAttribute("clickX", [(_context$initialTouch = context.initialTouches) === null || _context$initialTouch === void 0 || (_context$initialTouch = _context$initialTouch[0]) === null || _context$initialTouch === void 0 ? void 0 : _context$initialTouch.dataX, null]);
return;
}
if (chartUI.chart.getAttribute("panning")) chartUI.sdk.trigger("panEnd", chartUI.chart, dygraph.dateWindow_);
};
var unregister = chartUI.on("mousedown", mousedown).on("mouseup", mouseup).on("wheel", onZoom).on("dblclick", chartUI.chart.resetNavigation).on("touchstart", touchStart).on("touchmove", touchMove).on("touchend", touchEnd);
return function () {
unregister();
destroy();
};
};