@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 _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
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;