electrode-electrify-react-component/lib/components/sub-components/assets-visualization.js

electrode-electrify-react-component

"use strict";

exports.__esModule = true;

var _each2 = require("lodash/each");

var _each3 = _interopRequireDefault(_each2);

var _min2 = require("lodash/min");

var _min3 = _interopRequireDefault(_min2);

var _max2 = require("lodash/max");

var _max3 = _interopRequireDefault(_max2);

var _sample2 = require("lodash/sample");

var _sample3 = _interopRequireDefault(_sample2);

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _base = require("../../../src/styles/base.css");

var _base2 = _interopRequireDefault(_base);

var _prettysize = require("prettysize");

var _prettysize2 = _interopRequireDefault(_prettysize);

var _d = require("d3");

var _d2 = _interopRequireDefault(_d);

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

/* eslint react/prop-types: 0 */
var Asset = function Asset(props) {
  var color = (0, _sample3.default)(["#ff6e30", "#008586", "#ff4d64", "#9e9f34", "#00fdfe"]);
  var assetSize = (0, _prettysize2.default)(props.asset.size).split(" ");

  return _react2.default.createElement(
    "div",
    { className: _base2.default.assetItem },
    _react2.default.createElement(
      "div",
      { style: { backgroundColor: color }, className: _base2.default.assetSize },
      _react2.default.createElement(
        "h4",
        null,
        assetSize[0]
      ),
      _react2.default.createElement(
        "h4",
        null,
        assetSize[1]
      )
    ),
    _react2.default.createElement(
      "div",
      { className: _base2.default.assetProgressBarContainer },
      _react2.default.createElement(
        "h4",
        { style: { marginLeft: 15 } },
        props.asset.name
      ),
      _react2.default.createElement(
        "div",
        { className: _base2.default.assetProgressBar },
        _react2.default.createElement("div", { style: {
            width: props.scaledSize + "%",
            height: "100%",
            backgroundColor: color,
            borderRadius: 25
          } })
      )
    )
  );
};

var WebpackAssets = function WebpackAssets(props) {
  var maxAssetFileSize = (0, _max3.default)(props.assets.map(function (asset) {
    return asset.size;
  }));
  var minAssetFileSize = (0, _min3.default)(props.assets.map(function (asset) {
    return asset.size;
  }));
  var logScale = _d2.default.scale.log().domain([minAssetFileSize, maxAssetFileSize]).range([1, 100]); //eslint-disable-line no-magic-numbers

  (0, _each3.default)(props.assets, function (asset) {
    return asset.logScaledSize = logScale(asset.size);
  });

  return _react2.default.createElement(
    "div",
    { style: { height: 480, overflow: "scroll" } },
    props.assets.map(function (asset) {
      return _react2.default.createElement(Asset, { key: asset.size, asset: asset, scaledSize: asset.logScaledSize });
    })
  );
};

exports.default = WebpackAssets;


WebpackAssets.propTypes = {
  assets: _react.PropTypes.array
};