@krowdy-ui/views/es/GraphicBar/Column.js

React components that implement Google's Material Design.

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

const Column = ({
  index,
  divider,
  max,
  salary,
  multiplier,
  firstName,
  lastName,
  photo,
  selected
}) => {
  const avarage = salary / max / multiplier;
  const classes = useStyles({
    avarage,
    divider,
    percent: (avarage <= 1 ? avarage : 1) * 100
  });
  return /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.columnContainer, index === 0 && classes.leftLine, index === divider - 1 && classes.rightLine, index > 0 && index < divider - 1 && classes.centerLine)
  }, /*#__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, `S/ ${salary}`))
  }, /*#__PURE__*/React.createElement("div", {
    className: classes.bar
  })), /*#__PURE__*/React.createElement(UserPoint, {
    active: selected,
    bottom: -30,
    classes: {
      avatar: classes.avatar,
      point: classes.point
    },
    firstName: firstName,
    lastName: lastName,
    leftPercent: 50,
    photo: photo,
    subtitle: `S/ ${salary}`
  }));
};

const useStyles = makeStyles(theme => ({
  avatar: {},
  bar: {
    backgroundColor: theme.palette.primary[100],
    borderTop: ({
      avarage
    }) => `${avarage <= 1 ? 1 : 0}px solid ${theme.palette.primary[600]}`,
    height: ({
      percent
    }) => `${percent}%`,
    width: '100%'
  },
  centerLine: {
    borderLeft: `1px solid ${theme.palette.grey[200]}`,
    borderRight: `1px solid ${theme.palette.grey[200]}`
  },
  columnContainer: {
    '& $point': {
      backgroundColor: theme.palette.grey[300]
    },
    '&:hover': {
      '& $avatar': {
        display: 'block'
      },
      '& $point': {
        display: 'none'
      }
    },
    alignItems: 'flex-end',
    display: 'flex',
    height: 'inherit',
    justifyContent: 'center',
    position: 'relative',
    width: ({
      divider
    }) => `${100 / divider}%`
  },
  hide: {
    display: 'none'
  },
  leftLine: {
    borderLeft: `2px solid ${theme.palette.grey[200]}`,
    borderRight: `1px solid ${theme.palette.grey[200]}`
  },
  point: {},
  rightLine: {
    borderLeft: `1px solid ${theme.palette.grey[200]}`,
    borderRight: `2px solid ${theme.palette.grey[200]}`
  },
  show: {
    display: 'block'
  },
  tooltipTitle: {
    fontSize: 12,
    fontWeight: 'bold'
  }
}), {
  name: 'Column'
});
export default Column;