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

React + d3 library for creating histograms

import React from 'react';
import PropTypes from 'prop-types';
import { AxisBottom, AxisTop } from '@vx/axis';
import { axisStylesShape, tickStylesShape } from '../utils/propShapes';
var propTypes = {
  axisStyles: axisStylesShape,
  label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
  labelProps: PropTypes.object,
  // eslint-disable-line react/forbid-prop-types
  numTicks: PropTypes.number,
  orientation: PropTypes.oneOf(['bottom', 'top']),
  tickStyles: tickStylesShape,
  tickLabelProps: PropTypes.func,
  tickFormat: PropTypes.func,
  tickValues: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.string])),
  // probably injected by parent
  top: PropTypes.number,
  left: PropTypes.number,
  scale: PropTypes.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
};
export default 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' ? AxisBottom : AxisTop;
  var tickLabelProps = passedTickLabelProps;

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

  return React.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';