@netdata/charts
Version:
Netdata frontend SDK and chart utilities
57 lines • 2.07 kB
JavaScript
import Dygraph from "dygraphs";
import { dragGetX_ } from "dygraphs/src/dygraph-utils";
export default (function (chartUI) {
var startX;
var endX;
var mousedown = function mousedown(event, g, context) {
chartUI.sdk.trigger("highlightStart", chartUI.chart);
context.initializeMouseDown(event, g, context);
Dygraph.startZoom(event, g, context);
startX = context.dragStartX;
endX = -1;
chartUI.on("mousemove", mousemove).on("mouseup", _mouseup);
};
var mousemove = function mousemove(event, g, context) {
if (!context.isZooming) return;
var ctx = g.canvas_ctx_,
canvas = g.canvas_;
var area = g.getArea();
var rect = canvas.getBoundingClientRect();
var areaRect = {
left: rect.left + area.x,
top: rect.top + area.y,
width: area.w,
height: area.h
};
if (event.pageX < areaRect.left || event.pageX > areaRect.left + areaRect.width) return;
context.zoomMoved = true;
context.dragEndX = dragGetX_(event, context);
var dragStartX = context.dragStartX,
dragEndX = context.dragEndX;
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = "rgba(128,128,128,0.3)";
ctx.fillRect(Math.min(dragStartX, dragEndX), area.y, Math.abs(dragEndX - dragStartX), area.h);
context.prevEndX = dragEndX;
endX = dragEndX;
};
var getRange = function getRange(g) {
if (endX === -1 || Math.abs(startX - endX) < 5) return null;
var after = Math.round(g.toDataXCoord(startX) / 1000);
var before = Math.round(g.toDataXCoord(endX) / 1000);
return [after, before].sort(function (a, b) {
return a - b;
});
};
var _mouseup = function mouseup(event, g, context) {
if (context.isZooming) {
g.clearZoomRect_();
context.destroy();
var range = getRange(g);
chartUI.sdk.trigger("highlightEnd", chartUI.chart, range);
chartUI.chart.trigger("highlightEnd", range);
}
chartUI.off("mousemove", mousemove);
chartUI.off("mouseup", _mouseup);
};
return chartUI.on("mousedown", mousedown);
});