@krowdy-ui/views/esm/Histogram/Histogram.js

React components that implement Google's Material Design.

import _toConsumableArray from "@babel/runtime/helpers/esm/toConsumableArray";
import React from 'react';
import PropTypes from 'prop-types';
import clsx from 'clsx';
import { makeStyles } from '@krowdy-ui/core';
import Column from './Column';
import Price from './Price';
import Count from './Count';

var groupByObject = function groupByObject(array, prices) {
  var keyGetter = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : function (x) {
    return x;
  };
  return array.reduce(function (resultObject, x) {
    var match = keyGetter(x);
    var price = prices.find(function (price, index) {
      return match >= price && match <= prices[index + 1];
    });

    if (price) {
      resultObject[price] = resultObject[price] || [];
      resultObject[price].push(x);
    }

    return resultObject;
  }, {});
}; // let interval = 8
// let emptyPrices = new Array(interval)


var Histogram = function Histogram(_ref) {
  var _ref$multiplier = _ref.multiplier,
      multiplier = _ref$multiplier === void 0 ? 1 : _ref$multiplier,
      _ref$candidates = _ref.candidates,
      candidates = _ref$candidates === void 0 ? [] : _ref$candidates;
  var max = candidates.reduce(function (r, _ref2) {
    var salary = _ref2.salary;
    return Math.max(r, salary);
  }, 1);
  var min = candidates.reduce(function (r, _ref3) {
    var salary = _ref3.salary;
    return Math.min(r, salary);
  }, Infinity);
  var interval = (max - min) / multiplier;
  var emptyPrices = new Array(multiplier + 1).fill(min);
  var rawPrices = Array.from(emptyPrices, function (value, index) {
    return value + interval * index;
  });
  var prices = [0].concat(_toConsumableArray(rawPrices));
  var classes = useStyles({
    max: max
  });
  var rawData = groupByObject(candidates, rawPrices, function (_ref4) {
    var salary = _ref4.salary;
    return salary;
  });
  var keys = Object.keys(rawData);

  var maxCandidates = _toConsumableArray(keys).sort(function (a, b) {
    return rawData[b].length - rawData[a].length;
  })[0];

  var maxCandidatesSize = rawData[maxCandidates] ? rawData[maxCandidates].length : 0;
  var columnPrices = prices.slice(0, prices.length - 1);
  var pricePercent = 100 / prices.length;
  return /*#__PURE__*/React.createElement("div", {
    className: classes.root
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.column, classes.countCandidates)
  }, new Array(maxCandidatesSize).fill(maxCandidatesSize).map(function (count, index) {
    return /*#__PURE__*/React.createElement(Count, {
      count: count,
      index: index,
      key: index
    });
  })), /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.column, classes.container)
  }, /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.containerHistogram, classes.row)
  }, columnPrices.map(function (key, index) {
    return /*#__PURE__*/React.createElement(Column, {
      candidates: rawData[key] || [],
      divider: columnPrices.length,
      index: index,
      key: index,
      max: max,
      maxCandidates: maxCandidatesSize,
      pricePercent: pricePercent
    });
  })), /*#__PURE__*/React.createElement("div", {
    className: clsx(classes.row, classes.prices)
  }, prices.map(function (price, index) {
    return /*#__PURE__*/React.createElement(Price, {
      index: index,
      key: index,
      price: price,
      pricePercent: pricePercent
    });
  }))));
};

process.env.NODE_ENV !== "production" ? Histogram.propTypes = {
  candidates: PropTypes.arrayOf(PropTypes.shape({
    firstName: PropTypes.string,
    lastName: PropTypes.string,
    photo: PropTypes.string,
    salary: PropTypes.number,
    selected: PropTypes.bool
  })),
  multiplier: PropTypes.number
} : void 0;
var useStyles = makeStyles(function (theme) {
  return {
    column: {
      display: 'flex',
      flexDirection: 'column'
    },
    container: {
      height: '100%',
      minHeight: 150,
      width: '100%'
    },
    containerHistogram: {
      borderBottom: "1px solid ".concat(theme.palette.grey[600]),
      display: 'flex',
      flexDirection: 'row',
      height: 'inherit',
      width: 'inherit'
    },
    countCandidates: {
      alignItems: 'center'
    },
    price: {
      color: theme.palette.grey[600]
    },
    prices: {
      position: 'relative'
    },
    root: {
      display: 'flex',
      height: 'calc(100% - 32px)',
      marginTop: theme.spacing(1),
      paddingBottom: theme.spacing(1),
      paddingRight: theme.spacing(1)
    },
    row: {
      display: 'flex',
      flexDirection: 'row'
    }
  };
}, {
  name: 'Histogram'
});
export default Histogram;