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

netdata UI kit

import React from "react";
import { Text } from "../../../components/typography";
import Section, { Container } from "./section";
var Mouse = function Mouse() {
  return /*#__PURE__*/React.createElement(Container, null, /*#__PURE__*/React.createElement(Section, {
    title: "Mouse Over / Hover",
    topBorder: false
  }, /*#__PURE__*/React.createElement(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.createElement(Text, null, "All the other visible charts will also show and highlight their values for the same timestamp.")), /*#__PURE__*/React.createElement(Section, {
    title: "Drag Chart Contents"
  }, /*#__PURE__*/React.createElement(Text, null, "Drag the contents of a chart, by pressing the left mouse button and moving the mouse,"), /*#__PURE__*/React.createElement(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.createElement(Text, null, "Once a chart is panned, auto refreshing stops for all charts. To enable it again, double click a panned chart.")), /*#__PURE__*/React.createElement(Section, {
    title: "Double Click"
  }, "Double Click a chart to reset all the charts to their default auto-refreshing state."), /*#__PURE__*/React.createElement(Section, {
    title: "SHIFT + Drag"
  }, /*#__PURE__*/React.createElement(Text, null, "While pressing the ", /*#__PURE__*/React.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.createElement(Text, {
    margin: [4, 0, 0]
  }, "- The already loaded chart contents are zoomed (low resolution)"), /*#__PURE__*/React.createElement(Text, null, "- New data are transferred from the netdata server, to refresh the chart with possibly more detail."), /*#__PURE__*/React.createElement(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.createElement(Section, {
    title: "Highlight Timeframe"
  }, /*#__PURE__*/React.createElement(Text, null, "While pressing the ", /*#__PURE__*/React.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.createElement(Section, {
    title: "SHIFT + Mouse Wheel"
  }, /*#__PURE__*/React.createElement(Text, null, "While pressing the ", /*#__PURE__*/React.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.createElement(Text, null, "Once a chart is zoomed, auto refreshing stops for all charts. To enable it again, double click a zoomed chart.")), /*#__PURE__*/React.createElement(Section, {
    title: "Legend Operations"
  }, /*#__PURE__*/React.createElement(Text, null, "Click on the label or value of a dimension, will select / un-select this dimension."), /*#__PURE__*/React.createElement(Text, null, "You can press any of the ", /*#__PURE__*/React.createElement("b", null, "SHIFT"), " or ", /*#__PURE__*/React.createElement("b", null, "CONTROL"), " keys and then click on legend labels or values, to select / un-select multiple dimensions.")));
};
export default Mouse;