import React, { Fragment } 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: "Single tap",
    topBorder: false
  }, /*#__PURE__*/React.createElement(Text, null, "Single Tap on the contents of a chart to show, at its legend, the values for the timestamp tapped (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, "Touch and Drag the contents of a chart to pan it horizontally."), /*#__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 tap a panned chart.")), /*#__PURE__*/React.createElement(Section, {
    title: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Text, {
      strong: true
    }, "Zoom"), /*#__PURE__*/React.createElement(Text, {
      margin: [0, 0, 0, 1]
    }, "(does not work on firefox and IE/Edge)"))
  }, /*#__PURE__*/React.createElement(Text, null, "With two fingers, zoom in or out."), /*#__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: "Double Tap"
  }, "Tap on the label or value of a dimension, will select / un-select this dimension."));
};
export default Mouse;