@data-ui/histogram/lib/axis/XAxis.js

React + d3 library for creating histograms

"use strict";

exports.__esModule = true;
exports.default = XAxis;

var _react = _interopRequireDefault(require("react"));

var _propTypes = _interopRequireDefault(require("prop-types"));

var _axis = require("@vx/axis");

var _propShapes = require("../utils/propShapes");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

var propTypes = {
  axisStyles: _propShapes.axisStylesShape,
  label: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
  labelProps: _propTypes.default.object,
  // eslint-disable-line react/forbid-prop-types
  numTicks: _propTypes.default.number,
  orientation: _propTypes.default.oneOf(['bottom', 'top']),
  tickStyles: _propShapes.tickStylesShape,
  tickLabelProps: _propTypes.default.func,
  tickFormat: _propTypes.default.func,
  tickValues: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.string])),
  // probably injected by parent
  top: _propTypes.default.number,
  left: _propTypes.default.number,
  scale: _propTypes.default.func
};
var defaultProps = {
  axisStyles: {},
  label: null,
  labelProps: null,
  left: 0,
  numTicks: null,
  orientation: 'bottom',
  scale: null,
  tickFormat: null,
  tickLabelProps: undefined,
  tickStyles: {},
  top: 0,
  tickValues: undefined
};

function XAxis(_ref) {
  var axisStyles = _ref.axisStyles,
      label = _ref.label,
      labelProps = _ref.labelProps,
      top = _ref.top,
      left = _ref.left,
      numTicks = _ref.numTicks,
      orientation = _ref.orientation,
      scale = _ref.scale,
      tickFormat = _ref.tickFormat,
      passedTickLabelProps = _ref.tickLabelProps,
      tickStyles = _ref.tickStyles,
      tickValues = _ref.tickValues;
  if (!scale) return null;
  var Axis = orientation === 'bottom' ? _axis.AxisBottom : _axis.AxisTop;
  var tickLabelProps = passedTickLabelProps;

  if (!tickLabelProps) {
    tickLabelProps = tickStyles.label && tickStyles.label[orientation] ? function () {
      return tickStyles.label[orientation];
    } : undefined;
  }

  return _react.default.createElement(Axis, {
    top: top,
    left: left,
    hideTicks: false,
    hideZero: false,
    label: label,
    labelProps: labelProps || (axisStyles.label || {})[orientation],
    numTicks: numTicks,
    scale: scale,
    stroke: axisStyles.stroke,
    strokeWidth: axisStyles.strokeWidth,
    tickFormat: tickFormat,
    tickLength: tickStyles.tickLength,
    tickLabelProps: tickLabelProps,
    tickStroke: tickStyles.stroke,
    tickValues: tickValues
  });
}

XAxis.propTypes = propTypes;
XAxis.defaultProps = defaultProps;
XAxis.displayName = 'XAxis';