@netdata/netdata-ui/dist/organisms/documentation/dashboard/mouse.js

netdata UI kit

"use strict";

exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireDefault(require("react"));
var _typography = require("../../../components/typography");
var _section = _interopRequireWildcard(require("./section"));
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var Mouse = function Mouse() {
  return /*#__PURE__*/_react["default"].createElement(_section.Container, null, /*#__PURE__*/_react["default"].createElement(_section["default"], {
    title: "Mouse Over / Hover",
    topBorder: false
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "Mouse over on a chart to show, at its legend, the values for the timestamp under the mouse (the chart will also highlight the point at the chart)."), /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "All the other visible charts will also show and highlight their values for the same timestamp.")), /*#__PURE__*/_react["default"].createElement(_section["default"], {
    title: "Drag Chart Contents"
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "Drag the contents of a chart, by pressing the left mouse button and moving the mouse,"), /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "All the charts will follow soon after you let the chart alone (this little delay is by design: it speeds up your browser and lets you focus on what you are exploring)."), /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "Once a chart is panned, auto refreshing stops for all charts. To enable it again, double click a panned chart.")), /*#__PURE__*/_react["default"].createElement(_section["default"], {
    title: "Double Click"
  }, "Double Click a chart to reset all the charts to their default auto-refreshing state."), /*#__PURE__*/_react["default"].createElement(_section["default"], {
    title: "SHIFT + Drag"
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "While pressing the ", /*#__PURE__*/_react["default"].createElement("b", null, "SHIFT"), " key, press the left mouse button on the contents of a chart and move the mouse to select an area, to zoom in. The other charts will follow too. Zooming is performed in two phases:"), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
    margin: [4, 0, 0]
  }, "- The already loaded chart contents are zoomed (low resolution)"), /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "- New data are transferred from the netdata server, to refresh the chart with possibly more detail."), /*#__PURE__*/_react["default"].createElement(_typography.Text, {
    margin: [4, 0, 0]
  }, "Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, double click a zoomed chart.")), /*#__PURE__*/_react["default"].createElement(_section["default"], {
    title: "Highlight Timeframe"
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "While pressing the ", /*#__PURE__*/_react["default"].createElement("b", null, "ALT"), " key, press the left mouse button on the contents of a chart and move the mouse to select an area. The selected are will be highlighted on all charts.")), /*#__PURE__*/_react["default"].createElement(_section["default"], {
    title: "SHIFT + Mouse Wheel"
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "While pressing the ", /*#__PURE__*/_react["default"].createElement("b", null, "SHIFT"), " key and the mouse pointer is over the contents of a chart, scroll the mouse wheel to zoom in or out. This kind of zooming is aligned to center below the mouse pointer. The other charts will follow too."), /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, double click a zoomed chart.")), /*#__PURE__*/_react["default"].createElement(_section["default"], {
    title: "Legend Operations"
  }, /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "Click on the label or value of a dimension, will select / un-select this dimension."), /*#__PURE__*/_react["default"].createElement(_typography.Text, null, "You can press any of the ", /*#__PURE__*/_react["default"].createElement("b", null, "SHIFT"), " or ", /*#__PURE__*/_react["default"].createElement("b", null, "CONTROL"), " keys and then click on legend labels or values, to select / un-select multiple dimensions.")));
};
var _default = exports["default"] = Mouse;