@krowdy-ui/views/esm/BubbleChart/BubbleChart.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';
import Circle from './Circle';
import Avatar from './Avatar';

var BubbleChart = function BubbleChart(props) {
  var skills = props.skills,
      candidates = props.candidates,
      _props$max = props.max,
      max = _props$max === void 0 ? 4 : _props$max,
      _props$skillWidth = props.skillWidth,
      skillWidth = _props$skillWidth === void 0 ? 'auto' : _props$skillWidth;
  var classes = useStyles({
    skillWidth: skillWidth
  });
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.row, classes.container)
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.column, classes.skill)
  }, skills.map(function (_ref, index) {
    var name = _ref.name;
    return /*#__PURE__*/React.createElement("div", {
      className: classes.titleContainer,
      key: index
    }, !isNaN(skillWidth) ? /*#__PURE__*/React.createElement(Tooltip, {
      placement: "right",
      title: name
    }, /*#__PURE__*/React.createElement(Typography, {
      className: classes.textTitle,
      variant: "caption"
    }, name.length >= skillWidth / 3 ? "".concat(name.slice(0, skillWidth / 3), "...") : name)) : /*#__PURE__*/React.createElement(Typography, {
      variant: "caption"
    }, name));
  })), /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.row, classes.bubblesContainer)
  }, candidates.map(function (_ref2, index) {
    var firstName = _ref2.firstName,
        lastName = _ref2.lastName,
        photo = _ref2.photo,
        skillsCandidate = _ref2.skillsCandidate,
        selected = _ref2.selected;
    return /*#__PURE__*/React.createElement("div", {
      className: clsx(classes.column, classes.center, classes.candidate, classes.hover),
      key: index
    }, /*#__PURE__*/React.createElement("div", {
      className: classes.avatar
    }, /*#__PURE__*/React.createElement(Avatar, {
      active: selected ? selected : undefined,
      classes: {
        unselected: classes.avatarUnselected
      },
      firstName: firstName,
      key: index,
      lastName: lastName,
      photo: photo,
      selected: selected
    })), /*#__PURE__*/React.createElement("div", {
      className: classes.bubbles,
      key: index
    }, skills.map(function (_ref3) {
      var name = _ref3.name;
      return skillsCandidate.find(function (skill) {
        return name === skill.name;
      }) || {
        name: name,
        scaleOrder: 0,
        value: ''
      };
    }).map(function (_ref4, index) {
      var scaleOrder = _ref4.scaleOrder,
          value = _ref4.value;
      return /*#__PURE__*/React.createElement("div", {
        className: classes.bubble,
        key: index
      }, /*#__PURE__*/React.createElement(Circle, {
        firstName: firstName,
        lastName: lastName,
        max: max,
        selected: selected,
        size: scaleOrder,
        subtitle: value
      }));
    })));
  }))));
};

process.env.NODE_ENV !== "production" ? BubbleChart.propTypes = {
  candidates: PropTypes.arrayOf(PropTypes.shape({
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    photo: PropTypes.string,
    selected: PropTypes.bool,
    skillsCandidate: PropTypes.arrayOf(PropTypes.shape({
      name: PropTypes.string,
      scaleOrder: PropTypes.number,
      value: PropTypes.string
    }))
  })),
  max: PropTypes.number,
  skillWidth: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
  skills: PropTypes.arrayOf(PropTypes.shape({
    name: PropTypes.string
  }))
} : void 0;
var useStyles = makeStyles(function (theme) {
  return {
    avatar: {
      position: 'absolute',
      top: -theme.spacing(4.5)
    },
    avatarUnselected: {},
    bubble: {
      alignItems: 'center',
      display: 'flex',
      height: 38,
      justifyContent: 'center',
      width: 38
    },
    bubbles: {
      display: 'flex',
      flexDirection: 'column',
      height: '100%',
      justifyContent: 'space-between'
    },
    bubblesContainer: {
      flex: 1,
      justifyContent: 'space-between',
      overflowX: 'auto',
      paddingTop: theme.spacing(4.75)
    },
    candidate: {
      marginRight: theme.spacing(2)
    },
    center: {
      alignItems: 'center',
      position: 'relative'
    },
    column: {
      display: 'flex',
      flexDirection: 'column'
    },
    container: {
      marginTop: theme.spacing(3.25),
      minHeight: 150,
      width: '100%'
    },
    hover: {
      '&:hover': {
        '& $avatarUnselected': {
          visibility: 'visible'
        }
      }
    },
    root: {
      display: 'flex'
    },
    row: {
      display: 'flex',
      flexDirection: 'row'
    },
    skill: {
      alignItems: 'flex-end',
      justifyContent: 'space-between',
      marginLeft: theme.spacing(2),
      marginRight: theme.spacing(2.5),
      paddingTop: theme.spacing(4.75)
    },
    textTitle: {
      '-webkit-box-orient': 'vertical',
      '-webkit-line-clamp': 2,
      display: '-webkit-box',
      overflow: 'hidden'
    },
    title: {
      marginBottom: theme.spacing(1.25),
      marginTop: theme.spacing(1.25)
    },
    titleContainer: {
      alignItems: 'center',
      display: 'flex',
      height: 28,
      justifyContent: 'flex-end',
      textAlign: 'end',
      width: function width(_ref5) {
        var skillWidth = _ref5.skillWidth;
        return skillWidth;
      }
    }
  };
}, {
  name: 'BubbleChart'
});
export default BubbleChart;