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

React components that implement Google's Material Design.

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

const Count = ({
  count,
  index
}) => {
  const classes = useStyles({
    count
  });
  const showNumber = index % 2 === 0;
  return /*#__PURE__*/React.createElement("div", {
    className: classes.count
  }, showNumber ? /*#__PURE__*/React.createElement(Typography, {
    variant: "body1"
  }, count - index) : null);
};

const useStyles = makeStyles(theme => ({
  count: {
    alignItems: 'center',
    color: theme.palette.grey[600],
    display: 'flex',
    height: ({
      count
    }) => `${100 / count}%`,
    marginRight: theme.spacing(1)
  }
}));
export default Count;