@krowdy-ui/views/Histogram/Count.js

React components that implement Google's Material Design.

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports["default"] = void 0;

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

var _core = require("@krowdy-ui/core");

var Count = function Count(_ref) {
  var count = _ref.count,
      index = _ref.index;
  var classes = useStyles({
    count: count
  });
  var showNumber = index % 2 === 0;
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.count
  }, showNumber ? /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    variant: "body1"
  }, count - index) : null);
};

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    count: {
      alignItems: 'center',
      color: theme.palette.grey[600],
      display: 'flex',
      height: function height(_ref2) {
        var count = _ref2.count;
        return "".concat(100 / count, "%");
      },
      marginRight: theme.spacing(1)
    }
  };
});
var _default = Count;
exports["default"] = _default;