electrode-electrify-react-component/lib/helpers/assets-helpers/d3visualization.js

electrode-electrify-react-component

"use strict";

exports.__esModule = true;

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

var _each3 = _interopRequireDefault(_each2);

var _map2 = require("lodash/map");

var _map3 = _interopRequireDefault(_map2);

exports.default = function (_ref) {
  var refs = _ref.refs,
      data = _ref.data;
  //eslint-disable-line func-style, max-statements
  var width = 850;
  var barHeight = 70;
  data = data.sort(function (x, y) {
    return _d2.default.ascending(y.size, x.size);
  });
  var maxAssetFileSize = _d2.default.max((0, _map3.default)(data, function (d) {
    return d.size;
  }));
  var minAssetFileSize = _d2.default.min((0, _map3.default)(data, function (d) {
    return d.size;
  }));
  var logScale = _d2.default.scale.log().domain([minAssetFileSize, maxAssetFileSize]).range([0, width]);

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

  var chart = _d2.default.select(refs.assets).append("svg");
  chart.attr("preserveAspectRatio", "xMinYMin meet").attr("viewBox", "0 0 " + width + " " + barHeight * data.length * 2).append("g").classed("asset");

  var asset = chart.selectAll("g.asset").data(data).enter().append("g");

  asset.append("text").attr("y", function (d, i) {
    return i * barHeight * 2;
  }).attr("dy", "1em").text(function (d) {
    return d.name;
  }).style("font-size", "2em").style("fill", "white");

  var bars = asset.append("rect").attr("transform", function (d, i) {
    return "translate(30," + (i * barHeight * 2 + barHeight) + ")";
  }).attr("height", barHeight * 0.7).attr("width", function (d) {
    return d.size;
  });

  bars.style("fill", "#ff8553").attr("width", "0").transition().duration(2000).attr("width", function (d) {
    return d.logScaledSize;
  });

  bars.on("mouseover", function () {
    //do not use arrow fn
    _d2.default.select(this) //eslint-disable-line no-invalid-this
    .transition().ease("back-out", 5).duration(500).attr("height", barHeight * 0.8);
  }).on("mouseleave", function () {
    //do not use arrow fn
    _d2.default.select(this) //eslint-disable-line no-invalid-this
    .transition().ease("back-out", 5).duration(500).attr("height", barHeight * 0.7);
  });

  asset.append("text").attr("x", "50").attr("y", function (d, i) {
    return i * barHeight * 2 + barHeight * 1.35;
  }).attr("dy", ".35em").text(function (d) {
    return (0, _prettysize2.default)(d.size);
  }).style("font-size", "2.6em").style("fill", "white").on("mouseover", function (d, i) {
    // eslint-disable-line prefer-arrow-callback
    bars.each(function (e, j) {
      if (j === i) {
        _d2.default.select(this) //eslint-disable-line no-invalid-this
        .transition().ease("back-out", 5).duration(500).attr("height", barHeight * 0.8);
      }
    });
  }).on("mouseleave", function (d, i) {
    // eslint-disable-line prefer-arrow-callback
    bars.each(function (e, j) {
      if (j === i) {
        _d2.default.select(this) //eslint-disable-line no-invalid-this
        .transition().ease("back-out", 5).duration(500).attr("height", barHeight * 0.7);
      }
    });
  });
};

var _d = require("d3");

var _d2 = _interopRequireDefault(_d);

var _prettysize = require("prettysize");

var _prettysize2 = _interopRequireDefault(_prettysize);

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