@stokr/components-library 2.3.58-beta.6 → 2.3.58-beta.7

package/dist/components/ROI/ROIChart.js

@@ -10,25 +10,13 @@ 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 = {
+var _ROIChart2 = require("./ROIChart.styles");
+function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function (e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != typeof e && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (const t in e) "default" !== t && {}.hasOwnProperty.call(e, t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, t)) && (i.get || i.set) ? o(f, t, i) : f[t] = e[t]); return f; })(e, t); }
+function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
+function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == typeof i ? i : i + ""; }
+function _toPrimitive(t, r) { if ("object" != typeof t || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != typeof i) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
+const gradients = {
   red: {
     start: '#f24f45',
     end: '#ee220d'
@@ -38,176 +26,138 @@ var gradients = {
     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", {
+class ROIChart extends _react.PureComponent {
+  constructor() {
+    super(...arguments);
+    _defineProperty(this, "transitionDuration", 800);
+    _defineProperty(this, "transitionDatumDelay", 100);
+    _defineProperty(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(this, "checkIsMobile", () => !window.matchMedia((0, _rwd.getMedia)('Medium')).matches);
+    _defineProperty(this, "onResize", () => {
+      clearTimeout(this.resizeTimeout);
+      this.resizeTimeout = setTimeout(this.onResizeTimeout, 200);
     });
-    _defineProperty(_assertThisInitialized(_this), "onResizeTimeout", function () {
-      _this.updateChart(true);
+    _defineProperty(this, "onResizeTimeout", () => {
+      this.updateChart(true);
     });
-    _defineProperty(_assertThisInitialized(_this), "onScroll", function (e) {
-      if (_this.drawn) return;
-      if (_this.chartEl.getBoundingClientRect().top < window.innerHeight) {
-        _this.initialDrawChart();
+    _defineProperty(this, "onScroll", 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(this, "initialDrawChart", () => {
+      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 = {
+    _defineProperty(this, "createChart", () => {
+      if (!this.chartEl) return;
+      const {
+        id,
+        data
+      } = this.props;
+      const {
+        dataIndex
+      } = this.state;
+      const tooltip = data[dataIndex] && !!data[dataIndex].tooltip;
+      const wrapperWidth = this.chartEl.offsetWidth;
+      const wrapperHeight = 320;
+      const 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;
+      const width = wrapperWidth - (margin.left + margin.right);
+      const height = wrapperHeight - (margin.top + margin.bottom);
+      const thickness = 6;
+      const hThickness = thickness / 2;
+      const minBarHeight = 12;
+      this.hThickness = hThickness;
 
       // #region x scale
-      var xScale = _this.getXScale(data, width);
+      const xScale = this.getXScale(data, width);
       // #endregion x scale
 
       // #region y scale
-      var yScale = _this.getYScale(data, height);
+      const 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');
+      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);
+      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));
+      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));
+      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(''));
+      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(''));
+      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;
-      };
+      const gainBarY = d => d.gain < 0 ? yScale(0) : yScale(d.gain) - minBarHeight;
+      const gainBarHeight = d => Math.abs(yScale(0) - yScale(d.gain)) + minBarHeight;
+      const profitBarY = d => d.profit < 0 ? yScale(0) + gainBarHeight(d) : yScale(d.profit) - minBarHeight * 2;
+      const profitBarHeight = d => 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)"))
+      const chartContext = this;
+      const 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 () {});
+      }).on('mouseenter', tooltip ? this.onMouseEnter : () => {}).on('mouseleave', tooltip ? this.onMouseLeave : () => {});
 
       // #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);
+      barGroups.append('rect').attr('class', 'stackedBar__gain').attr('fill', "url(#".concat(id, "-barChart-bluegradient)")).attr('x', (d, i) => 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);
+      barGroups.append('rect').attr('class', 'stackedBar__profit').attr('fill', "url(#".concat(id, "-barChart-redgradient)")).attr('x', (d, i) => 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);
+      barGroups.append('text').attr('class', 'stackedBar__gainText').attr('fill', '#fff').attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', gainBarY).text(d => "\u20AC ".concat(d.gain)).attr('opacity', 0);
+      barGroups.append('text').attr('class', 'stackedBar__profitText').attr('fill', '#fff').attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', profitBarY).text(d => "\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 = {
+    _defineProperty(this, "getXScale", (data, width) => d3.scaleBand().range([0, width]).domain(data.map(datum => datum.year)).padding(0.2));
+    _defineProperty(this, "getYScale", (data, height) => d3.scaleLinear().range([height, 0]).domain([Math.min(d3.min(data, datum => datum.gain + datum.profit), 0), Math.max(d3.max(data, datum => datum.gain + datum.profit), Math.abs(d3.min(data, datum => datum.gain + datum.profit)))]));
+    _defineProperty(this, "setTooltip", (opened, dataIndex) => {
+      const newState = {
         tooltipOpen: opened
       };
       if (dataIndex !== undefined) newState.dataIndex = dataIndex;
-      _this.setState(newState);
+      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;
+    _defineProperty(this, "onMouseEnter", function onMouseEnter(d, i) {
+      const chartRect = this.chartContext.chartEl.getBoundingClientRect();
+      const barRect = this.getBoundingClientRect();
+      const y = barRect.y - chartRect.y;
+      const 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");
@@ -216,245 +166,189 @@ var ROIChart = /*#__PURE__*/function (_PureComponent) {
       if (this.chartContext.checkIsMobile()) {
         return;
       }
-      var barGroup = d3.select(this);
-      var shift = Math.min(this.xScale.bandwidth(), 100);
+      const barGroup = d3.select(this);
+      const 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;
+      const gainBar = barGroup.select('.stackedBar__gain');
+      const profitBar = barGroup.select('.stackedBar__profit');
+      const gainText = barGroup.select('.stackedBar__gainText');
+      const profitText = barGroup.select('.stackedBar__profitText');
+      const gainTextWidth = gainText.node().getBoundingClientRect().width;
+      const 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;
+    _defineProperty(this, "onMouseLeave", function onMouseLeave(d, i) {
+      const width = 6;
       this.chartContext.setTooltip(false);
       if (this.chartContext.checkIsMobile()) {
         return;
       }
-      var barGroup = d3.select(this);
+      const 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 = {
+    _defineProperty(this, "updateChart", resizeUpdate => {
+      if (!this.chartEl) return;
+      const {
+        data,
+        id
+      } = this.props;
+      const {
+        dataIndex
+      } = this.state;
+      const tooltip = data[dataIndex] && !!data[dataIndex].tooltip;
+      const duration = this.transitionDuration;
+      const delay = this.transitionDatumDelay;
+      const wrapperWidth = this.chartEl.offsetWidth;
+      const wrapperHeight = 320;
+      const 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;
+      const width = wrapperWidth - (margin.left + margin.right);
+      const height = wrapperHeight - (margin.top + margin.bottom);
+      const thickness = 6;
+      const hThickness = thickness / 2;
+      const minBarHeight = 12;
+      const textOffsetTop = 3;
       // #region x scale
-      var xScale = _this.getXScale(data, width);
+      const xScale = this.getXScale(data, width);
       // #endregion x scale
 
       // #region y scale
-      var yScale = _this.getYScale(data, height);
+      const yScale = this.getYScale(data, height);
       // #endregion y scale
       // #region root svg
-      _this.svg.transition().duration(duration).attr('width', wrapperWidth).attr('height', wrapperHeight);
+      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(''));
+      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(''));
+      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));
+      this.xAxis.transition().delay(() => 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));
+      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;
-      };
+      const gainBarY = d => d.gain < 0 ? yScale(0) : yScale(d.gain) - minBarHeight;
+      const gainBarHeight = d => Math.abs(yScale(0) - yScale(d.gain)) + minBarHeight;
+      const profitBarY = d => d.profit < 0 ? yScale(0) + gainBarHeight(d) : yScale(d.profit) - minBarHeight * 2;
+      const profitBarHeight = d => Math.abs(yScale(d.gain) - yScale(d.profit)) + minBarHeight;
 
       // #endregion bar measures functions
 
-      var chartContext = _assertThisInitialized(_this);
+      const chartContext = this;
       // #region bars
-      var barGroups = _this.chart.selectAll('.stackedBar').data(data);
+      const 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) {
+      const 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 () {});
+      }).on('mouseenter', tooltip ? this.onMouseEnter : () => {}).on('mouseleave', tooltip ? this.onMouseLeave : () => {});
 
       // #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);
+      barGroupsEnter.append('rect').attr('class', 'stackedBar__gain').attr('fill', "url(#".concat(id, "-barChart-bluegradient)")).attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', yScale(0)).attr('height', 0).attr('width', 6).transition().delay(() => 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);
+      barGroupsEnter.append('rect').attr('class', 'stackedBar__profit').attr('fill', "url(#".concat(id, "-barChart-redgradient)")).attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', yScale(0)).attr('height', 0).attr('width', 6).transition().delay(() => 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);
+      barGroupsEnter.append('text').attr('class', 'stackedBar__gainText').attr('fill', '#fff').attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', d => gainBarY(d) + gainBarHeight(d) / 2 + textOffsetTop).text(d => "\u20AC ".concat(d.gain)).attr('opacity', 0);
+      barGroupsEnter.append('text').attr('class', 'stackedBar__profitText').attr('fill', '#fff').attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', d => profitBarY(d) + profitBarHeight(d) / 2 + textOffsetTop).text(d => "\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.select('.stackedBar__gain').attr('width', 6).transition().delay(() => resizeUpdate ? 0 : delay).duration(duration).attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', gainBarY).attr('height', gainBarHeight);
+      barGroups.select('.stackedBar__profit').attr('width', 6).transition().delay(() => resizeUpdate ? 0 : delay).duration(duration).attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', profitBarY).attr('height', profitBarHeight);
+      barGroups.select('.stackedBar__gainText').attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', d => gainBarY(d) + gainBarHeight(d) / 2 + textOffsetTop).text(d => "\u20AC ".concat(d.gain));
+      barGroups.select('.stackedBar__profitText').attr('x', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', d => profitBarY(d) + profitBarHeight(d) / 2 + textOffsetTop).text(d => "\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();
+  componentDidMount() {
+    this.createChart();
+    window.addEventListener('resize', this.onResize);
+    window.addEventListener('scroll', this.onScroll);
+    this.onScroll();
+  }
+  componentDidUpdate(prevProps) {
+    const {
+      data
+    } = this.props;
+    const hasDataLengthChange = prevProps.data.length !== data.length;
+    if (hasDataLengthChange) {
+      this.updateChart();
+      return;
     }
-  }, {
-    key: "componentDidUpdate",
-    value: function componentDidUpdate(prevProps) {
-      var data = this.props.data;
-      var hasDataLengthChange = prevProps.data.length !== data.length;
-      if (hasDataLengthChange) {
-        this.updateChart();
-        return;
+    const hasDataChange = prevProps.data.some((datum, index) => datum.profit !== data[index].profit);
+    if (hasDataChange) {
+      this.updateChart();
+    }
+  }
+  componentWillUnmount() {
+    clearTimeout(this.resizeTimeout);
+    window.removeEventListener('resize', this.onResize);
+    window.removeEventListener('scroll', this.onScroll);
+  }
+  render() {
+    const {
+      tooltipOpen,
+      dataIndex
+    } = this.state;
+    const {
+      data
+    } = this.props;
+    return /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_ROIChart2.Chart, {
+      ref: el => {
+        this.chartEl = el;
       }
-      var hasDataChange = prevProps.data.some(function (datum, index) {
-        return datum.profit !== data[index].profit;
-      });
-      if (hasDataChange) {
-        this.updateChart();
+    }, data[dataIndex] && data[dataIndex].tooltip && /*#__PURE__*/_react.default.createElement(_ROIChart2.TooltipWrapper, {
+      ref: el => {
+        this.tooltipEl = el;
       }
-    }
-  }, {
-    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);
+    }, /*#__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(_ROIChart2.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"
+    })));
+  }
+}
 exports.ROIChart = ROIChart;
 ROIChart.propTypes = {
   id: _propTypes.default.string.isRequired,
@@ -465,5 +359,4 @@ ROIChart.propTypes = {
     tooltip: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node])
   })).isRequired
 };
-var _default = ROIChart;
-exports.default = _default;
+var _default = exports.default = ROIChart;