@krowdy-ui/views/Histogram/Price.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 Price = function Price(_ref) {
  var price = _ref.price,
      index = _ref.index,
      pricePercent = _ref.pricePercent;
  var calc = pricePercent * index;
  var classes = useStyles({
    calc: calc,
    price: price
  });
  return /*#__PURE__*/_react["default"].createElement("div", {
    className: classes.price
  }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
    variant: "body1"
  }, price ? Math.round(price) : ''));
};

var useStyles = (0, _core.makeStyles)(function (theme) {
  return {
    price: {
      color: theme.palette.grey[600],
      left: function left(_ref2) {
        var price = _ref2.price,
            calc = _ref2.calc;
        return "calc(".concat(calc, "% - ").concat(Math.round(price).toString().length * 6.85 / 2, "px)");
      },
      position: 'absolute'
    }
  };
});
var _default = Price;
exports["default"] = _default;