@krowdy-ui/views/es/BubbleChart/Circle.js

React components that implement Google's Material Design.

import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles, Tooltip, Typography } from '@krowdy-ui/core';

const Circle = props => {
  const {
    firstName = '',
    lastName = '',
    subtitle,
    max = 4,
    size = 4,
    selected = false
  } = props;
  const classes = useStyles({
    max,
    size
  });
  return /*#__PURE__*/React.createElement(Tooltip, {
    arrow: true,
    placement: "top",
    title: /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(Typography, {
      className: classes.tooltipTitle
    }, firstName, " ", lastName), /*#__PURE__*/React.createElement(Typography, null, subtitle))
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.root, selected ? classes.select : [classes.hover, classes.unselect])
  }));
};

process.env.NODE_ENV !== "production" ? Circle.propTypes = {
  firstName: PropTypes.string,
  lastName: PropTypes.string,
  max: PropTypes.number,
  selected: PropTypes.bool,
  size: PropTypes.number,
  subtitle: PropTypes.string
} : void 0;
const useStyles = makeStyles(theme => ({
  hover: {
    '&:hover': {
      backgroundColor: theme.palette.primary[300]
    }
  },
  root: {
    borderRadius: '50%',
    height: ({
      size,
      max
    }) => 6 / (max - 1) * size * 4,
    width: ({
      size,
      max
    }) => 6 / (max - 1) * size * 4
  },
  select: {
    backgroundColor: theme.palette.primary[500]
  },
  unselect: {
    backgroundColor: ({
      size
    }) => theme.palette.secondary[size > 1 ? 100 : 0]
  }
}));
export default Circle;