@krowdy-ui/views/es/Histogram/Price.js

React components that implement Google's Material Design.

import React from 'react';
import { makeStyles, Typography } from '@krowdy-ui/core';

const Price = ({
  price,
  index,
  pricePercent
}) => {
  const calc = pricePercent * index;
  const classes = useStyles({
    calc,
    price
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classes.price
  }, /*#__PURE__*/React.createElement(Typography, {
    variant: "body1"
  }, price ? Math.round(price) : ''));
};

const useStyles = makeStyles(theme => ({
  price: {
    color: theme.palette.grey[600],
    left: ({
      price,
      calc
    }) => `calc(${calc}% - ${Math.round(price).toString().length * 6.85 / 2}px)`,
    position: 'absolute'
  }
}));
export default Price;