@stokr/components-library 1.0.9 → 1.1.1

package/dist/components/ROI/ROIChart.js

@@ -0,0 +1,469 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ROIChart = void 0;
+var _react = _interopRequireWildcard(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var d3 = _interopRequireWildcard(require("d3"));
+var _reactTippy = require("react-tippy");
+var _BarChartLegend = _interopRequireDefault(require("../BarChartLegend/BarChartLegend"));
+var _rwd = require("../../styles/rwd");
+var _ROIChart = require("./ROIChart.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
+function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
+function _defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, _toPropertyKey(descriptor.key), descriptor); } }
+function _createClass(Constructor, protoProps, staticProps) { if (protoProps) _defineProperties(Constructor.prototype, protoProps); if (staticProps) _defineProperties(Constructor, staticProps); Object.defineProperty(Constructor, "prototype", { writable: false }); return Constructor; }
+function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function"); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, writable: true, configurable: true } }); Object.defineProperty(subClass, "prototype", { writable: false }); if (superClass) _setPrototypeOf(subClass, superClass); }
+function _setPrototypeOf(o, p) { _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) { o.__proto__ = p; return o; }; return _setPrototypeOf(o, p); }
+function _createSuper(Derived) { var hasNativeReflectConstruct = _isNativeReflectConstruct(); return function _createSuperInternal() { var Super = _getPrototypeOf(Derived), result; if (hasNativeReflectConstruct) { var NewTarget = _getPrototypeOf(this).constructor; result = Reflect.construct(Super, arguments, NewTarget); } else { result = Super.apply(this, arguments); } return _possibleConstructorReturn(this, result); }; }
+function _possibleConstructorReturn(self, call) { if (call && (_typeof(call) === "object" || typeof call === "function")) { return call; } else if (call !== void 0) { throw new TypeError("Derived constructors may only return object or undefined"); } return _assertThisInitialized(self); }
+function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
+function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Reflect.construct) return false; if (Reflect.construct.sham) return false; if (typeof Proxy === "function") return true; try { Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); return true; } catch (e) { return false; } }
+function _getPrototypeOf(o) { _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) { return o.__proto__ || Object.getPrototypeOf(o); }; return _getPrototypeOf(o); }
+function _defineProperty(obj, key, value) { key = _toPropertyKey(key); if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
+function _toPropertyKey(arg) { var key = _toPrimitive(arg, "string"); return _typeof(key) === "symbol" ? key : String(key); }
+function _toPrimitive(input, hint) { if (_typeof(input) !== "object" || input === null) return input; var prim = input[Symbol.toPrimitive]; if (prim !== undefined) { var res = prim.call(input, hint || "default"); if (_typeof(res) !== "object") return res; throw new TypeError("@@toPrimitive must return a primitive value."); } return (hint === "string" ? String : Number)(input); }
+var gradients = {
+  red: {
+    start: '#f24f45',
+    end: '#ee220d'
+  },
+  blue: {
+    start: '#6a97e0',
+    end: '#0050ca'
+  }
+};
+var ROIChart = /*#__PURE__*/function (_PureComponent) {
+  _inherits(ROIChart, _PureComponent);
+  var _super = _createSuper(ROIChart);
+  function ROIChart() {
+    var _this;
+    _classCallCheck(this, ROIChart);
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+    _this = _super.call.apply(_super, [this].concat(args));
+    _defineProperty(_assertThisInitialized(_this), "transitionDuration", 800);
+    _defineProperty(_assertThisInitialized(_this), "transitionDatumDelay", 100);
+    _defineProperty(_assertThisInitialized(_this), "state", {
+      tooltipOpen: false,
+      dataIndex: 0
+    });
+    _defineProperty(_assertThisInitialized(_this), "checkIsMobile", function () {
+      return !window.matchMedia((0, _rwd.getMedia)('Medium')).matches;
+    });
+    _defineProperty(_assertThisInitialized(_this), "onResize", function () {
+      clearTimeout(_this.resizeTimeout);
+      _this.resizeTimeout = setTimeout(_this.onResizeTimeout, 200);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onResizeTimeout", function () {
+      _this.updateChart(true);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onScroll", function (e) {
+      if (_this.drawn) return;
+      if (_this.chartEl.getBoundingClientRect().top < window.innerHeight) {
+        _this.initialDrawChart();
+      }
+    });
+    _defineProperty(_assertThisInitialized(_this), "initialDrawChart", function () {
+      _this.updateChart();
+      _this.drawn = true;
+    });
+    _defineProperty(_assertThisInitialized(_this), "createChart", function () {
+      if (!_this.chartEl) return;
+      var _this$props = _this.props,
+        id = _this$props.id,
+        data = _this$props.data;
+      var dataIndex = _this.state.dataIndex;
+      var tooltip = data[dataIndex] && !!data[dataIndex].tooltip;
+      var wrapperWidth = _this.chartEl.offsetWidth;
+      var wrapperHeight = 320;
+      var margin = {
+        top: 20,
+        left: 0,
+        right: 40,
+        bottom: 30
+      };
+      var width = wrapperWidth - (margin.left + margin.right);
+      var height = wrapperHeight - (margin.top + margin.bottom);
+      var thickness = 6;
+      var hThickness = thickness / 2;
+      var minBarHeight = 12;
+      _this.hThickness = hThickness;
+
+      // #region x scale
+      var xScale = _this.getXScale(data, width);
+      // #endregion x scale
+
+      // #region y scale
+      var yScale = _this.getYScale(data, height);
+      // #endregion y scale
+
+      _this.svg = d3.select(_this.chartEl).append('svg').attr('width', wrapperWidth).attr('height', wrapperHeight);
+      _this.chart = _this.svg.append('g').attr('transform', "translate(".concat(margin.left, ", ").concat(margin.top, ")"));
+      _this.defs = _this.svg.append('defs');
+
+      // #region gradient
+      _this.redGradient = _this.defs.append('linearGradient').attr('id', "".concat(id, "-barChart-redgradient")).attr('x1', '50%').attr('x2', '50%').attr('y1', '100%').attr('y2', '0%');
+      _this.redGradient.append('stop').attr('class', 'start').attr('offset', '0%').attr('stop-color', gradients.red.start).attr('stop-opacity', 1);
+      _this.redGradient.append('stop').attr('class', 'end').attr('offset', '100%').attr('stop-color', gradients.red.end).attr('stop-opacity', 1);
+      _this.blueGradient = _this.defs.append('linearGradient').attr('id', "".concat(id, "-barChart-bluegradient")).attr('x1', '50%').attr('x2', '50%').attr('y1', '100%').attr('y2', '0%');
+      _this.blueGradient.append('stop').attr('class', 'start').attr('offset', '0%').attr('stop-color', gradients.blue.start).attr('stop-opacity', 1);
+      _this.blueGradient.append('stop').attr('class', 'end').attr('offset', '100%').attr('stop-color', gradients.blue.end).attr('stop-opacity', 1);
+      // #endregion gradient
+
+      // #region x axis
+      _this.xAxis = _this.chart.append('g').attr('class', 'axisX').attr('transform', "translate(0, ".concat(yScale(0), ")")).call(d3.axisBottom(xScale).tickPadding(height - yScale(0) + minBarHeight));
+      // #endregion x axis
+
+      // #region y axis
+      _this.yAxis = _this.chart.append('g').attr('class', 'axisY').attr('transform', "translate(".concat(width, ", 0)")).call(d3.axisRight().scale(yScale).ticks(4));
+      // #endregion y axis
+
+      // #region grid x axis
+      _this.xGrid = _this.chart.append('g').attr('class', 'gridX').attr('transform', "translate(0, ".concat(height, ")")).call(d3.axisBottom().scale(xScale).tickSize(-height, 0, 0).tickFormat(''));
+      // #endregion grid x axis
+
+      // #region grid y axis
+      _this.yGrid = _this.chart.append('g').attr('class', 'gridY').attr('transform', "translate(".concat(width, ", 0)")).call(d3.axisRight().scale(yScale).tickSize(-width, 0, 0).ticks(4).tickFormat(''));
+      // #endregion grid y axis
+
+      // #region bar measures functions
+      var gainBarY = function gainBarY(d) {
+        return d.gain < 0 ? yScale(0) : yScale(d.gain) - minBarHeight;
+      };
+      var gainBarHeight = function gainBarHeight(d) {
+        return Math.abs(yScale(0) - yScale(d.gain)) + minBarHeight;
+      };
+      var profitBarY = function profitBarY(d) {
+        return d.profit < 0 ? yScale(0) + gainBarHeight(d) : yScale(d.profit) - minBarHeight * 2;
+      };
+      var profitBarHeight = function profitBarHeight(d) {
+        return Math.abs(yScale(d.gain) - yScale(d.profit)) + minBarHeight;
+      };
+
+      // #endregion bar measures functions
+
+      // #region bars
+      var chartContext = _assertThisInitialized(_this);
+      var barGroups = _this.chart.selectAll('.stackedBar').data(data).enter().append('g').attr('class', 'stackedBar').attr('transform', "translate(".concat(-hThickness, ", 0)"))
+      // end series create
+      .each(function bindContext(d, i) {
+        d3.select(this).node().chartContext = chartContext;
+        d3.select(this).node().xScale = xScale;
+      }).on('mouseenter', tooltip ? _this.onMouseEnter : function () {}).on('mouseleave', tooltip ? _this.onMouseLeave : function () {});
+
+      // #region gainBar
+      barGroups.append('rect').attr('class', 'stackedBar__gain').attr('fill', "url(#".concat(id, "-barChart-bluegradient)")).attr('x', function (d, i) {
+        return xScale(d.year);
+      }).attr('y', gainBarY).attr('height', gainBarHeight).attr('width', 6);
+      // #endregion gainBar
+
+      // #region profitBar
+      barGroups.append('rect').attr('class', 'stackedBar__profit').attr('fill', "url(#".concat(id, "-barChart-redgradient)")).attr('x', function (d, i) {
+        return xScale(d.year);
+      }).attr('y', profitBarY).attr('height', profitBarHeight).attr('width', 6);
+      // #endregion profitBar
+
+      barGroups.append('text').attr('class', 'stackedBar__gainText').attr('fill', '#fff').attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', gainBarY).text(function (d) {
+        return "\u20AC ".concat(d.gain);
+      }).attr('opacity', 0);
+      barGroups.append('text').attr('class', 'stackedBar__profitText').attr('fill', '#fff').attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', profitBarY).text(function (d) {
+        return "\u20AC ".concat(d.profit);
+      }).attr('opacity', 0);
+      // #endregion bars
+    });
+    _defineProperty(_assertThisInitialized(_this), "getXScale", function (data, width) {
+      return d3.scaleBand().range([0, width]).domain(data.map(function (datum) {
+        return datum.year;
+      })).padding(0.2);
+    });
+    _defineProperty(_assertThisInitialized(_this), "getYScale", function (data, height) {
+      return d3.scaleLinear().range([height, 0]).domain([Math.min(d3.min(data, function (datum) {
+        return datum.gain + datum.profit;
+      }), 0), Math.max(d3.max(data, function (datum) {
+        return datum.gain + datum.profit;
+      }), Math.abs(d3.min(data, function (datum) {
+        return datum.gain + datum.profit;
+      })))]);
+    });
+    _defineProperty(_assertThisInitialized(_this), "setTooltip", function (opened, dataIndex) {
+      var newState = {
+        tooltipOpen: opened
+      };
+      if (dataIndex !== undefined) newState.dataIndex = dataIndex;
+      _this.setState(newState);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMouseEnter", function onMouseEnter(d, i) {
+      var chartRect = this.chartContext.chartEl.getBoundingClientRect();
+      var barRect = this.getBoundingClientRect();
+      var y = barRect.y - chartRect.y;
+      var x = this.xScale(d.year) + this.xScale.bandwidth() / 2;
+      if (this.chartContext.tooltipEl) {
+        this.chartContext.tooltipEl.style.left = "".concat(x, "px");
+        this.chartContext.tooltipEl.style.top = "".concat(y, "px");
+      }
+      this.chartContext.setTooltip(true, i);
+      if (this.chartContext.checkIsMobile()) {
+        return;
+      }
+      var barGroup = d3.select(this);
+      var shift = Math.min(this.xScale.bandwidth(), 100);
+      barGroup.transition().duration(300).attr('transform', "translate(".concat(-shift / 2, ", 0)"));
+      var gainBar = barGroup.select('.stackedBar__gain');
+      var profitBar = barGroup.select('.stackedBar__profit');
+      var gainText = barGroup.select('.stackedBar__gainText');
+      var profitText = barGroup.select('.stackedBar__profitText');
+      var gainTextWidth = gainText.node().getBoundingClientRect().width;
+      var profitTextWidth = profitText.node().getBoundingClientRect().width;
+      gainBar.transition().duration(300).attr('width', shift);
+      profitBar.transition().duration(300).attr('width', shift);
+      gainText.attr('transform', "translate(".concat(shift / 2 - gainTextWidth / 2, ", 0)")).transition().duration(300).delay(200).attr('opacity', 1);
+      profitText.attr('transform', "translate(".concat(shift / 2 - profitTextWidth / 2, ", 0)")).transition().duration(300).delay(200).attr('opacity', 1);
+    });
+    _defineProperty(_assertThisInitialized(_this), "onMouseLeave", function onMouseLeave(d, i) {
+      var width = 6;
+      this.chartContext.setTooltip(false);
+      if (this.chartContext.checkIsMobile()) {
+        return;
+      }
+      var barGroup = d3.select(this);
+      barGroup.transition().duration(300).delay(200).attr('transform', "translate(".concat(-width / 2, ", 0)"));
+      barGroup.select('.stackedBar__gain').transition().duration(300).delay(200).attr('width', width);
+      barGroup.select('.stackedBar__profit').transition().duration(300).delay(200).attr('width', width);
+      barGroup.select('.stackedBar__gainText').transition().duration(300).attr('opacity', 0);
+      barGroup.select('.stackedBar__profitText').transition().duration(300).attr('opacity', 0);
+    });
+    _defineProperty(_assertThisInitialized(_this), "updateChart", function (resizeUpdate) {
+      if (!_this.chartEl) return;
+      var _this$props2 = _this.props,
+        data = _this$props2.data,
+        id = _this$props2.id;
+      var dataIndex = _this.state.dataIndex;
+      var tooltip = data[dataIndex] && !!data[dataIndex].tooltip;
+      var duration = _this.transitionDuration;
+      var delay = _this.transitionDatumDelay;
+      var wrapperWidth = _this.chartEl.offsetWidth;
+      var wrapperHeight = 320;
+      var margin = {
+        top: 20,
+        left: 0,
+        right: 40,
+        bottom: 30
+      };
+      var width = wrapperWidth - (margin.left + margin.right);
+      var height = wrapperHeight - (margin.top + margin.bottom);
+      var thickness = 6;
+      var hThickness = thickness / 2;
+      var minBarHeight = 12;
+      var textOffsetTop = 3;
+      // #region x scale
+      var xScale = _this.getXScale(data, width);
+      // #endregion x scale
+
+      // #region y scale
+      var yScale = _this.getYScale(data, height);
+      // #endregion y scale
+      // #region root svg
+      _this.svg.transition().duration(duration).attr('width', wrapperWidth).attr('height', wrapperHeight);
+      // #endregion root svg
+
+      // #region grid x axis
+      _this.xGrid.transition().duration(duration).attr('transform', "translate(0, ".concat(height, ")")).call(d3.axisBottom().scale(xScale).tickSize(-height, 0, 0).tickFormat(''));
+      // #endregion grid x axis
+
+      // #region grid y axis
+      _this.yGrid.transition().duration(duration).attr('transform', "translate(".concat(width, ", 0)")).call(d3.axisRight().scale(yScale).tickSize(-width, 0, 0).ticks(4).tickFormat(''));
+      // #endregion grid y axis
+
+      // #region x axis
+      _this.xAxis.transition().delay(function () {
+        return resizeUpdate ? 0 : delay;
+      }).duration(duration).attr('transform', "translate(0, ".concat(yScale(0), ")")).call(d3.axisBottom().scale(xScale).tickPadding(height - yScale(0) + minBarHeight));
+      // #endregion x axis
+
+      // #region y axis
+      _this.yAxis.transition().duration(duration).attr('transform', "translate(".concat(width, ", 0)")).call(d3.axisRight().scale(yScale).ticks(4));
+      // #endregion y axis
+
+      // #region bar measures functions
+      var gainBarY = function gainBarY(d) {
+        return d.gain < 0 ? yScale(0) : yScale(d.gain) - minBarHeight;
+      };
+      var gainBarHeight = function gainBarHeight(d) {
+        return Math.abs(yScale(0) - yScale(d.gain)) + minBarHeight;
+      };
+      var profitBarY = function profitBarY(d) {
+        return d.profit < 0 ? yScale(0) + gainBarHeight(d) : yScale(d.profit) - minBarHeight * 2;
+      };
+      var profitBarHeight = function profitBarHeight(d) {
+        return Math.abs(yScale(d.gain) - yScale(d.profit)) + minBarHeight;
+      };
+
+      // #endregion bar measures functions
+
+      var chartContext = _assertThisInitialized(_this);
+      // #region bars
+      var barGroups = _this.chart.selectAll('.stackedBar').data(data);
+      barGroups.each(function bindContext(d, i) {
+        d3.select(this).node().chartContext = chartContext;
+        d3.select(this).node().xScale = xScale;
+      });
+      var barGroupsEnter = barGroups.enter().append('g').attr('class', 'stackedBar').attr('transform', "translate(".concat(-hThickness, ", 0)")).each(function bindContext(d, i) {
+        d3.select(this).node().chartContext = chartContext;
+        d3.select(this).node().xScale = xScale;
+      }).on('mouseenter', tooltip ? _this.onMouseEnter : function () {}).on('mouseleave', tooltip ? _this.onMouseLeave : function () {});
+
+      // #region gainBar
+      barGroupsEnter.append('rect').attr('class', 'stackedBar__gain').attr('fill', "url(#".concat(id, "-barChart-bluegradient)")).attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', yScale(0)).attr('height', 0).attr('width', 6).transition().delay(function () {
+        return delay * 4;
+      }).duration(duration).attr('y', gainBarY).attr('height', gainBarHeight);
+      // #endregion gainBar
+
+      // #region profitBar
+      barGroupsEnter.append('rect').attr('class', 'stackedBar__profit').attr('fill', "url(#".concat(id, "-barChart-redgradient)")).attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', yScale(0)).attr('height', 0).attr('width', 6).transition().delay(function () {
+        return delay * 4;
+      }).duration(duration).attr('y', profitBarY).attr('height', profitBarHeight);
+
+      // #endregion profitBar
+
+      barGroupsEnter.append('text').attr('class', 'stackedBar__gainText').attr('fill', '#fff').attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', function (d) {
+        return gainBarY(d) + gainBarHeight(d) / 2 + textOffsetTop;
+      }).text(function (d) {
+        return "\u20AC ".concat(d.gain);
+      }).attr('opacity', 0);
+      barGroupsEnter.append('text').attr('class', 'stackedBar__profitText').attr('fill', '#fff').attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', function (d) {
+        return profitBarY(d) + profitBarHeight(d) / 2 + textOffsetTop;
+      }).text(function (d) {
+        return "\u20AC ".concat(d.profit);
+      }).attr('opacity', 0);
+
+      // #endregion bars
+
+      barGroups.select('.stackedBar__gain').attr('width', 6).transition().delay(function () {
+        return resizeUpdate ? 0 : delay;
+      }).duration(duration).attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', gainBarY).attr('height', gainBarHeight);
+      barGroups.select('.stackedBar__profit').attr('width', 6).transition().delay(function () {
+        return resizeUpdate ? 0 : delay;
+      }).duration(duration).attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', profitBarY).attr('height', profitBarHeight);
+      barGroups.select('.stackedBar__gainText').attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', function (d) {
+        return gainBarY(d) + gainBarHeight(d) / 2 + textOffsetTop;
+      }).text(function (d) {
+        return "\u20AC ".concat(d.gain);
+      });
+      barGroups.select('.stackedBar__profitText').attr('x', function (d, i) {
+        return xScale(d.year) + xScale.bandwidth() / 2;
+      }).attr('y', function (d) {
+        return profitBarY(d) + profitBarHeight(d) / 2 + textOffsetTop;
+      }).text(function (d) {
+        return "\u20AC ".concat(d.profit);
+      });
+      barGroups.exit().remove();
+    });
+    return _this;
+  }
+  _createClass(ROIChart, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.createChart();
+      window.addEventListener('resize', this.onResize);
+      window.addEventListener('scroll', this.onScroll);
+      this.onScroll();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps) {
+      var data = this.props.data;
+      var hasDataLengthChange = prevProps.data.length !== data.length;
+      if (hasDataLengthChange) {
+        this.updateChart();
+        return;
+      }
+      var hasDataChange = prevProps.data.some(function (datum, index) {
+        return datum.profit !== data[index].profit;
+      });
+      if (hasDataChange) {
+        this.updateChart();
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      clearTimeout(this.resizeTimeout);
+      window.removeEventListener('resize', this.onResize);
+      window.removeEventListener('scroll', this.onScroll);
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      var _this2 = this;
+      var _this$state = this.state,
+        tooltipOpen = _this$state.tooltipOpen,
+        dataIndex = _this$state.dataIndex;
+      var data = this.props.data;
+      return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ROIChart.Chart, {
+        ref: function ref(el) {
+          _this2.chartEl = el;
+        }
+      }, data[dataIndex] && data[dataIndex].tooltip && /*#__PURE__*/_react.default.createElement(_ROIChart.TooltipWrapper, {
+        ref: function ref(el) {
+          _this2.tooltipEl = el;
+        }
+      }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
+        open: tooltipOpen,
+        position: "top",
+        animation: "fade",
+        html: data[dataIndex].tooltip,
+        theme: "light",
+        arrow: true,
+        duration: 200
+      }))), /*#__PURE__*/_react.default.createElement(_ROIChart.LegendWrapper, {
+        noPaddingHorizontal: true
+      }, /*#__PURE__*/_react.default.createElement(_BarChartLegend.default, {
+        id: "roi-profit",
+        label: "Cumulative profit payouts",
+        colorTheme: "blue"
+      }), /*#__PURE__*/_react.default.createElement(_BarChartLegend.default, {
+        id: "roi-gain",
+        label: "Gain on price",
+        colorTheme: "red"
+      })));
+    }
+  }]);
+  return ROIChart;
+}(_react.PureComponent);
+exports.ROIChart = ROIChart;
+ROIChart.propTypes = {
+  id: _propTypes.default.string.isRequired,
+  data: _propTypes.default.arrayOf(_propTypes.default.shape({
+    year: _propTypes.default.string.isRequired,
+    profit: _propTypes.default.number.isRequired,
+    gain: _propTypes.default.number.isRequired,
+    tooltip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
+  })).isRequired
+};
+var _default = ROIChart;
+exports.default = _default;

package/dist/components/ROI/ROIChart.styles.js

@@ -0,0 +1,33 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.TooltipWrapper = exports.LegendWrapper = exports.Chart = exports.BarChartTooltip = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _BarChartLegend = require("../BarChartLegend/BarChartLegend.styles");
+var _rwd = _interopRequireDefault(require("../../styles/rwd"));
+var _templateObject;
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _taggedTemplateLiteral(strings, raw) { if (!raw) { raw = strings.slice(0); } return Object.freeze(Object.defineProperties(strings, { raw: { value: Object.freeze(raw) } })); }
+var Chart = _styledComponents.default.div.withConfig({
+  displayName: "ROIChartstyles__Chart",
+  componentId: "sc-wdm5e-0"
+})(["position:relative;display:block;width:100%;height:auto;.axisX,.axisY{& > path{stroke:#e1e1e1;}.tick{text{font-weight:600;font-size:14px;fill:#9b9b9b;}line{stroke:none;}}}.axisY{display:none;& > path{stroke:none;}}.gridX,.gridY{display:none;& > path{stroke:none;}}.gridX{.tick line{stroke:none;}}.gridY{.tick line{stroke:#dfe5f1;}}.stackedBar__gainText,.stackedBar__profitText{font-weight:bold;}"]);
+exports.Chart = Chart;
+var TooltipWrapper = _styledComponents.default.div.withConfig({
+  displayName: "ROIChartstyles__TooltipWrapper",
+  componentId: "sc-wdm5e-1"
+})(["text-align:left;position:absolute;top:0;left:0;pointer-events:none;"]);
+exports.TooltipWrapper = TooltipWrapper;
+var BarChartTooltip = _styledComponents.default.div.withConfig({
+  displayName: "ROIChartstyles__BarChartTooltip",
+  componentId: "sc-wdm5e-2"
+})(["font-size:10px;min-width:40px;& > h3{font-weight:400;font-family:'Open Sans';font-size:16px;margin:0;padding:0;}& > p{color:#79ca65;font-family:'Open Sans';font-size:11px;text-transform:uppercase;}"]);
+exports.BarChartTooltip = BarChartTooltip;
+var LegendWrapper = (0, _styledComponents.default)(_ComponentWrapper.default).withConfig({
+  displayName: "ROIChartstyles__LegendWrapper",
+  componentId: "sc-wdm5e-3"
+})(["", ""], _rwd.default.Large(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n    ", " {\n      display: inline-block;\n  \n      + ", " {\n        padding-left: 32px;\n      }\n    }\n  "])), _BarChartLegend.Container, _BarChartLegend.Container));
+exports.LegendWrapper = LegendWrapper;

package/dist/components/ROI/ROIModal.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _Modal = require("../Modal/Modal");
+var _Text = _interopRequireDefault(require("../Text/Text.styles"));
+var _Grid = require("../Grid/Grid.styles");
+var _ComponentWrapper = _interopRequireDefault(require("../ComponentWrapper/ComponentWrapper.styles"));
+var _ComponentScroll = _interopRequireDefault(require("../ComponentScroll/ComponentScroll"));
+var _Table = _interopRequireDefault(require("../AdminDashboard/Table/Table"));
+var _ROI = require("./ROI.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+function _toConsumableArray(arr) { return _arrayWithoutHoles(arr) || _iterableToArray(arr) || _unsupportedIterableToArray(arr) || _nonIterableSpread(); }
+function _nonIterableSpread() { throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
+function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
+function _iterableToArray(iter) { if (typeof Symbol !== "undefined" && iter[Symbol.iterator] != null || iter["@@iterator"] != null) return Array.from(iter); }
+function _arrayWithoutHoles(arr) { if (Array.isArray(arr)) return _arrayLikeToArray(arr); }
+function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
+var ROIModal = function ROIModal(_ref) {
+  var isModalOpen = _ref.isModalOpen,
+    onModalClose = _ref.onModalClose;
+  return /*#__PURE__*/_react.default.createElement(_Modal.Modal, {
+    isOpen: isModalOpen,
+    onClose: onModalClose
+  }, /*#__PURE__*/_react.default.createElement(_Modal.ModalInner, null, /*#__PURE__*/_react.default.createElement(_Text.default, null, /*#__PURE__*/_react.default.createElement("h3", null, "COMPANY RELATED METRICS")), /*#__PURE__*/_react.default.createElement(_ComponentScroll.default, {
+    offset: -32,
+    autoHeight: true,
+    autoHeightMin: 200,
+    autoHeightMax: 400
+  }, /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "INDUSTRY AVERAGE"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemsRow, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "PROCE-TO-EARNING RATIO"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "3.00"))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "RETURN ON EQUITY (ROE)"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "\u20AC 200,000"))))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_ROI.Label, null, "COMPANY DATA"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemsRow, null, /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "COMPANY VALUATION"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "\u20AC 300,000"))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "SHARE OF TOKEN SUPPLY SOLD DURING STO"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "\u20AC 200,000"))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "INITIAL TOKEN PRICE"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "\u20AC 1.00"))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "Revenue share RATE"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "66.7%"))), /*#__PURE__*/_react.default.createElement(_Grid.Column, {
+    part: 1,
+    full: 3
+  }, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContainer, null, /*#__PURE__*/_react.default.createElement(_ROI.ROIItemTitle, null, "Revenue share PER TOKEN"), /*#__PURE__*/_react.default.createElement(_ROI.ROIItemContent, null, "0.000333%"))))), /*#__PURE__*/_react.default.createElement(_ComponentWrapper.default, {
+    noPaddingHorizontal: true
+  }, /*#__PURE__*/_react.default.createElement(_Table.default, {
+    columns: [{
+      key: 'period',
+      label: 'PERIOD',
+      width: '24%'
+    }, {
+      key: 'profit_payout',
+      label: 'PROFIT PAYOUT RATIO',
+      width: '36%'
+    }, {
+      key: 'earnings',
+      label: 'COMPANY EARNINGS FORECAST (MLN)',
+      width: '40%'
+    }],
+    data: _toConsumableArray(Array(10).fill({})).map(function (_, index) {
+      return {
+        id: index,
+        period: "YEAR ".concat(index + 1),
+        profit_payout: "".concat(4 * (index + 1), "%"),
+        earnings: "\u20AC ".concat(Number(0.01 * 0.4 * (index + 1)).toFixed(2))
+      };
+    }),
+    noScroll: true
+  })))));
+};
+ROIModal.propTypes = {
+  isModalOpen: _propTypes.default.bool.isRequired,
+  onModalClose: _propTypes.default.func.isRequired
+};
+var _default = ROIModal;
+exports.default = _default;

package/dist/components/ROI/ROIScenarioBox.js

@@ -0,0 +1,55 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _propTypes = _interopRequireDefault(require("prop-types"));
+var _reactTippy = require("react-tippy");
+var _ROIScenarioBox = require("./ROIScenarioBox.styles");
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+var ROIScenarioBox = function ROIScenarioBox(_ref) {
+  var title = _ref.title,
+    subtitle = _ref.subtitle,
+    tooltip = _ref.tooltip,
+    radio = _ref.radio;
+  return /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.Wrap, null, /*#__PURE__*/_react.default.createElement("input", {
+    type: "radio",
+    id: radio.id,
+    name: radio.name || radio.id,
+    value: radio.value,
+    checked: radio.checked,
+    disabled: radio.disabled,
+    onChange: radio.onChange,
+    onBlur: radio.onBlur
+  }), /*#__PURE__*/_react.default.createElement("label", {
+    htmlFor: radio.id
+  }, /*#__PURE__*/_react.default.createElement(_reactTippy.Tooltip, {
+    position: "right",
+    title: tooltip,
+    theme: "light",
+    arrow: true,
+    duration: 200
+  }, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.Container, null, /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.Title, null, title), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.Subtitle, null, subtitle), /*#__PURE__*/_react.default.createElement(_ROIScenarioBox.CheckMark, null)))));
+};
+ROIScenarioBox.propTypes = {
+  title: _propTypes.default.string.isRequired,
+  subtitle: _propTypes.default.string,
+  tooltip: _propTypes.default.string,
+  radio: _propTypes.default.shape({
+    id: _propTypes.default.string.isRequired,
+    name: _propTypes.default.string,
+    value: _propTypes.default.string,
+    checked: _propTypes.default.bool,
+    onChange: _propTypes.default.func,
+    onBlur: _propTypes.default.func,
+    hide: _propTypes.default.bool
+  }).isRequired
+};
+ROIScenarioBox.defaultProps = {
+  subtitle: '',
+  tooltip: ''
+};
+var _default = ROIScenarioBox;
+exports.default = _default;