@krowdy-ui/views/BubbleChart/BubbleChart.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 _propTypes = _interopRequireDefault(require("prop-types"));

var _clsx = _interopRequireDefault(require("clsx"));

var _core = require("@krowdy-ui/core");

var _Circle = _interopRequireDefault(require("./Circle"));

var _Avatar = _interopRequireDefault(require("./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["default"].createElement("div", {
    className: classes.root
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.row, classes.container)
  }, /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(classes.column, classes.skill)
  }, skills.map(function (_ref, index) {
    var name = _ref.name;
    return /*#__PURE__*/_react["default"].createElement("div", {
      className: classes.titleContainer,
      key: index
    }, !isNaN(skillWidth) ? /*#__PURE__*/_react["default"].createElement(_core.Tooltip, {
      placement: "right",
      title: name
    }, /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      className: classes.textTitle,
      variant: "caption"
    }, name.length >= skillWidth / 3 ? "".concat(name.slice(0, skillWidth / 3), "...") : name)) : /*#__PURE__*/_react["default"].createElement(_core.Typography, {
      variant: "caption"
    }, name));
  })), /*#__PURE__*/_react["default"].createElement("div", {
    className: (0, _clsx["default"])(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["default"].createElement("div", {
      className: (0, _clsx["default"])(classes.column, classes.center, classes.candidate, classes.hover),
      key: index
    }, /*#__PURE__*/_react["default"].createElement("div", {
      className: classes.avatar
    }, /*#__PURE__*/_react["default"].createElement(_Avatar["default"], {
      active: selected ? selected : undefined,
      classes: {
        unselected: classes.avatarUnselected
      },
      firstName: firstName,
      key: index,
      lastName: lastName,
      photo: photo,
      selected: selected
    })), /*#__PURE__*/_react["default"].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["default"].createElement("div", {
        className: classes.bubble,
        key: index
      }, /*#__PURE__*/_react["default"].createElement(_Circle["default"], {
        firstName: firstName,
        lastName: lastName,
        max: max,
        selected: selected,
        size: scaleOrder,
        subtitle: value
      }));
    })));
  }))));
};

process.env.NODE_ENV !== "production" ? BubbleChart.propTypes = {
  candidates: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    firstName: _propTypes["default"].string,
    lastName: _propTypes["default"].string,
    photo: _propTypes["default"].string,
    selected: _propTypes["default"].bool,
    skillsCandidate: _propTypes["default"].arrayOf(_propTypes["default"].shape({
      name: _propTypes["default"].string,
      scaleOrder: _propTypes["default"].number,
      value: _propTypes["default"].string
    }))
  })),
  max: _propTypes["default"].number,
  skillWidth: _propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].oneOf(['auto'])]),
  skills: _propTypes["default"].arrayOf(_propTypes["default"].shape({
    name: _propTypes["default"].string
  }))
} : void 0;
var useStyles = (0, _core.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'
});
var _default = BubbleChart;
exports["default"] = _default;