@stokr/components-library 0.5.4 → 0.5.6

package/dist/ROI/ROI.js

@@ -0,0 +1,261 @@
+import React, { PureComponent, Fragment } from 'react';
+import { Collapse } from 'react-collapse';
+import { Row, Column } from 'components/Grid/Grid.styles';
+import Text from 'components/Text/Text.styles';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import RangeInput from 'components/Input/RangeInput';
+import ExpandButton from 'components/ExpandButton/ExpandButton';
+import { TextButton } from 'components/TextLink/TextLink.styles';
+import { Title, Label, Value, TabContainer, TooltipTitle, TooltipContent, ROIItemTitle, ROIItemContent, ROIItemContainer, ROIItemsRow } from './ROI.styles';
+import ROIScenarioBox from './ROIScenarioBox';
+import ROIChart from './ROIChart';
+import ROIModal from './ROIModal';
+const PANEL = {
+  FORECAST_SCENARIO: 'forecast_scenario',
+  PROFITPAYMENT_SCENARIO: 'profitpayment_scenario'
+};
+export class ROI extends PureComponent {
+  state = {
+    totalInvestment: 1000,
+    years: 1,
+    extendedPanel: null,
+    forecast: 'roiForecast01',
+    profitpayment: 'profitpayment01',
+    isModalOpen: false
+  };
+  handleTotalInvestmentChange = value => {
+    this.setState({
+      totalInvestment: value
+    });
+  };
+  handleYearsChange = value => {
+    this.setState({
+      years: value
+    });
+  };
+  handleForecastChange = e => {
+    this.setState({
+      forecast: e.target.value
+    });
+  };
+  handleProfitpaymentChange = e => {
+    this.setState({
+      profitpayment: e.target.value
+    });
+  };
+  togglePanel = panelId => {
+    const {
+      extendedPanel
+    } = this.state;
+    this.setState({
+      extendedPanel: extendedPanel !== panelId ? panelId : null
+    });
+  };
+  toggleModal = isModalOpen => {
+    this.setState({
+      isModalOpen
+    });
+  };
+  generateChartData = () => {
+    const {
+      years,
+      totalInvestment
+    } = this.state;
+    return [...Array(years).fill({})].map((_, index) => {
+      const factor = index >= 2 ? index : index - 2;
+      const profit = totalInvestment * 0.4 * factor;
+      const gain = profit * 0.5;
+      return {
+        year: `${index + 1}`,
+        profit,
+        gain,
+        tooltip: /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(TooltipTitle, null, `YEAR ${index + 1}`), /*#__PURE__*/React.createElement(TooltipContent, null, `TOTAL GAIN ON INVESTMENT: € ${profit}`, /*#__PURE__*/React.createElement("br", null), `CUMULATIVE PROFIT PAYOUTS: € ${gain}`))
+      };
+    });
+  };
+  render() {
+    const {
+      totalInvestment,
+      years,
+      extendedPanel,
+      forecast,
+      profitpayment,
+      isModalOpen
+    } = this.state;
+    const chartData = this.generateChartData();
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Row, null, /*#__PURE__*/React.createElement(Column, {
+      part: 7
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/React.createElement(Text, null, /*#__PURE__*/React.createElement(Title, null, "Return on investment tool"))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/React.createElement(Label, null, "TOTAL INVESTMENT"), /*#__PURE__*/React.createElement(Value, null, `€ ${totalInvestment}`), /*#__PURE__*/React.createElement(RangeInput, {
+      id: "totalInvestmentRange",
+      name: "totalInvestmentRange",
+      value: totalInvestment,
+      min: 100,
+      max: 100000,
+      step: 100,
+      onChange: this.handleTotalInvestmentChange
+    })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingTop: true,
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/React.createElement(Label, null, "Years"), /*#__PURE__*/React.createElement(Value, null, years), /*#__PURE__*/React.createElement(RangeInput, {
+      id: "yearsRange",
+      name: "yearsRange",
+      value: years,
+      min: 1,
+      max: 10,
+      onChange: this.handleYearsChange
+    })))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true,
+      borderTop: true
+    }, /*#__PURE__*/React.createElement(ExpandButton, {
+      title: "FORECAST SCENARIO",
+      textLeft: true,
+      isOpened: extendedPanel === PANEL.FORECAST_SCENARIO,
+      onClick: () => this.togglePanel(PANEL.FORECAST_SCENARIO)
+    }), /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: extendedPanel === PANEL.FORECAST_SCENARIO
+    }, /*#__PURE__*/React.createElement(TabContainer, {
+      borderTop: true
+    }, /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "Company Scenario",
+      subtitle: "Earnings forecast",
+      tooltip: "Hello",
+      radio: {
+        id: 'roiForecast01',
+        value: 'roiForecast01',
+        name: 'roiForecast',
+        checked: forecast === 'roiForecast01',
+        onChange: this.handleForecastChange
+      }
+    }), /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "Conservative",
+      subtitle: "ROE-based earnings forecast",
+      tooltip: "Hello",
+      radio: {
+        id: 'roiForecast02',
+        value: 'roiForecast02',
+        name: 'roiForecast',
+        checked: forecast === 'roiForecast02',
+        onChange: this.handleForecastChange
+      }
+    }), /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "Industry average",
+      subtitle: "ROE-based earnings forecast",
+      tooltip: "Hello",
+      radio: {
+        id: 'roiForecast03',
+        value: 'roiForecast03',
+        name: 'roiForecast',
+        checked: forecast === 'roiForecast03',
+        onChange: this.handleForecastChange
+      }
+    }), /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "Positive",
+      subtitle: "ROE-based earnings forecast",
+      tooltip: "Hello",
+      radio: {
+        id: 'roiForecast04',
+        value: 'roiForecast04',
+        name: 'roiForecast',
+        checked: forecast === 'roiForecast04',
+        onChange: this.handleForecastChange
+      }
+    })))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true,
+      borderTop: true
+    }, /*#__PURE__*/React.createElement(ExpandButton, {
+      title: "PROFITPAYMENT SCENARIO",
+      textLeft: true,
+      isOpened: extendedPanel === PANEL.PROFITPAYMENT_SCENARIO,
+      onClick: () => this.togglePanel(PANEL.PROFITPAYMENT_SCENARIO)
+    }), /*#__PURE__*/React.createElement(Collapse, {
+      isOpened: extendedPanel === PANEL.PROFITPAYMENT_SCENARIO
+    }, /*#__PURE__*/React.createElement(TabContainer, {
+      borderTop: true
+    }, /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "Company Scenario",
+      tooltip: "Hello",
+      radio: {
+        id: 'profitpayment01',
+        value: 'profitpayment01',
+        name: 'profitpayment',
+        checked: profitpayment === 'profitpayment01',
+        onChange: this.handleProfitpaymentChange
+      }
+    }), /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "Increasing Payouts",
+      tooltip: "Hello",
+      radio: {
+        id: 'profitpayment02',
+        value: 'profitpayment02',
+        name: 'profitpayment',
+        checked: profitpayment === 'profitpayment02',
+        onChange: this.handleProfitpaymentChange
+      }
+    }), /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "No Payouts",
+      tooltip: "Hello",
+      radio: {
+        id: 'profitpayment03',
+        value: 'profitpayment03',
+        name: 'profitpayment',
+        checked: profitpayment === 'profitpayment03',
+        onChange: this.handleProfitpaymentChange
+      }
+    }), /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "100% Payouts",
+      tooltip: "Hello",
+      radio: {
+        id: 'profitpayment04',
+        value: 'profitpayment04',
+        name: 'profitpayment',
+        checked: profitpayment === 'profitpayment04',
+        onChange: this.handleProfitpaymentChange
+      }
+    }), /*#__PURE__*/React.createElement(ROIScenarioBox, {
+      title: "50/50 Payouts",
+      tooltip: "Hello",
+      radio: {
+        id: 'profitpayment05',
+        value: 'profitpayment05',
+        name: 'profitpayment',
+        checked: profitpayment === 'profitpayment05',
+        onChange: this.handleProfitpaymentChange
+      }
+    }))))), /*#__PURE__*/React.createElement(Column, {
+      part: 9,
+      withBorder: true
+    }, /*#__PURE__*/React.createElement(ComponentWrapper, null, /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/React.createElement(ROIChart, {
+      id: "roichart",
+      data: chartData
+    })), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPaddingHorizontal: true,
+      noPaddingTop: true
+    }, /*#__PURE__*/React.createElement(Label, null, "INVESTMENT RESULTS"), /*#__PURE__*/React.createElement(ROIItemsRow, null, /*#__PURE__*/React.createElement(Column, {
+      part: 1,
+      full: 3
+    }, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "TOTAL GAIN ON INVESTMENT (ROI)"), /*#__PURE__*/React.createElement(ROIItemContent, null, "\u20AC 641 (68%)"))), /*#__PURE__*/React.createElement(Column, {
+      part: 1,
+      full: 3
+    }, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "GAIN ON PAYOUTS (ROI)"), /*#__PURE__*/React.createElement(ROIItemContent, null, "\u20AC 166 (18%)"))), /*#__PURE__*/React.createElement(Column, {
+      part: 1,
+      full: 3
+    }, /*#__PURE__*/React.createElement(ROIItemContainer, null, /*#__PURE__*/React.createElement(ROIItemTitle, null, "GAIN ON PRICE (ROI)"), /*#__PURE__*/React.createElement(ROIItemContent, null, "\u20AC 475 (50%)"))))), /*#__PURE__*/React.createElement(ComponentWrapper, {
+      noPadding: true
+    }, /*#__PURE__*/React.createElement(TextButton, {
+      onClick: () => this.toggleModal(true)
+    }, "CHECK HOW WE CALCULATE THIS"))))), /*#__PURE__*/React.createElement(ROIModal, {
+      isModalOpen: isModalOpen,
+      onModalClose: () => this.toggleModal(false)
+    }));
+  }
+}
+export default ROI;

package/dist/ROI/ROI.styles.js

@@ -0,0 +1,71 @@
+import styled from 'styled-components/macro';
+import ComponentWrapper from 'components/ComponentWrapper/ComponentWrapper.styles';
+import backgroundImage from 'static/images/background.png';
+import theme from 'styles/theme';
+export const Title = styled.h3`
+  padding-left: 56px;
+  position: relative;
+
+  &::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 0;
+    bottom: 0;
+    width: 8px;
+    background: ${props => theme.cPrimary};
+  }
+`;
+export const Label = styled.div`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2px;
+  font-weight: 700;
+  text-transform: uppercase;
+`;
+export const Value = styled.div`
+  font-size: 22px;
+  line-height: 28px;
+  letter-spacing: 0.8px;
+  font-weight: 300;
+  padding: 14px 0;
+`;
+export const TabContainer = styled(ComponentWrapper)`
+  background-color: #fff;
+  background-image: url(${backgroundImage});
+  background-repeat: no-repeat;
+  background-position: 0% 100%;
+`;
+export const TooltipTitle = styled.div`
+  font-size: 11px;
+  line-height: 24px;
+  letter-spacing: 2px;
+  font-weight: bold;
+`;
+export const TooltipContent = styled.div`
+  font-size: 11px;
+  line-height: 16px;
+  letter-spacing: 0.8px;
+  font-weight: 300;
+`;
+export const ROIItemsRow = styled.div`
+  margin: 0 -32px;
+  display: flex;
+  flex-wrap: wrap;
+  text-align: left;
+`;
+export const ROIItemContainer = styled.div`
+  padding: 32px;
+`;
+export const ROIItemTitle = styled.div`
+  font-size: 11px;
+  line-height: 20px;
+  letter-spacing: 1.9px;
+  margin-bottom: 16px;
+`;
+export const ROIItemContent = styled.div`
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 24px;
+  letter-spacing: 0.6px;
+`;

package/dist/ROI/ROIChart.js

@@ -0,0 +1,348 @@
+import React, { PureComponent, Fragment } from 'react';
+import PropTypes from 'prop-types';
+import * as d3 from 'd3';
+import { Tooltip } from 'react-tippy';
+import BarChartLegend from 'components/BarChartLegend/BarChartLegend';
+import { getMedia } from 'styles/rwd';
+import { Chart, TooltipWrapper, LegendWrapper } from './ROIChart.styles';
+const gradients = {
+  red: {
+    start: '#f24f45',
+    end: '#ee220d'
+  },
+  blue: {
+    start: '#6a97e0',
+    end: '#0050ca'
+  }
+};
+export class ROIChart extends PureComponent {
+  transitionDuration = 800;
+  transitionDatumDelay = 100;
+  state = {
+    tooltipOpen: false,
+    dataIndex: 0
+  };
+  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;
+    }
+    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);
+  }
+  checkIsMobile = () => !window.matchMedia(getMedia('Medium')).matches;
+  onResize = () => {
+    clearTimeout(this.resizeTimeout);
+    this.resizeTimeout = setTimeout(this.onResizeTimeout, 200);
+  };
+  onResizeTimeout = () => {
+    this.updateChart(true);
+  };
+  onScroll = e => {
+    if (this.drawn) return;
+    if (this.chartEl.getBoundingClientRect().top < window.innerHeight) {
+      this.initialDrawChart();
+    }
+  };
+  initialDrawChart = () => {
+    this.updateChart();
+    this.drawn = true;
+  };
+  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
+    };
+    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
+    const xScale = this.getXScale(data, width);
+    // #endregion x scale
+
+    // #region y scale
+    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(${margin.left}, ${margin.top})`);
+    this.defs = this.svg.append('defs');
+
+    // #region gradient
+    this.redGradient = this.defs.append('linearGradient').attr('id', `${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', `${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, ${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(${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, ${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(${width}, 0)`).call(d3.axisRight().scale(yScale).tickSize(-width, 0, 0).ticks(4).tickFormat(''));
+    // #endregion grid y axis
+
+    // #region bar measures functions
+    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
+    const chartContext = this;
+    const barGroups = this.chart.selectAll('.stackedBar').data(data).enter().append('g').attr('class', 'stackedBar').attr('transform', `translate(${-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 : () => {}).on('mouseleave', tooltip ? this.onMouseLeave : () => {});
+
+    // #region gainBar
+    barGroups.append('rect').attr('class', 'stackedBar__gain').attr('fill', `url(#${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(#${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', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', gainBarY).text(d => `€ ${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 => `€ ${d.profit}`).attr('opacity', 0);
+    // #endregion bars
+  };
+
+  getXScale = (data, width) => d3.scaleBand().range([0, width]).domain(data.map(datum => datum.year)).padding(0.2);
+  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)))]);
+  setTooltip = (opened, dataIndex) => {
+    const newState = {
+      tooltipOpen: opened
+    };
+    if (dataIndex !== undefined) newState.dataIndex = dataIndex;
+    this.setState(newState);
+  };
+  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 = `${x}px`;
+      this.chartContext.tooltipEl.style.top = `${y}px`;
+    }
+    this.chartContext.setTooltip(true, i);
+    if (this.chartContext.checkIsMobile()) {
+      return;
+    }
+    const barGroup = d3.select(this);
+    const shift = Math.min(this.xScale.bandwidth(), 100);
+    barGroup.transition().duration(300).attr('transform', `translate(${-shift / 2}, 0)`);
+    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(${shift / 2 - gainTextWidth / 2}, 0)`).transition().duration(300).delay(200).attr('opacity', 1);
+    profitText.attr('transform', `translate(${shift / 2 - profitTextWidth / 2}, 0)`).transition().duration(300).delay(200).attr('opacity', 1);
+  };
+  onMouseLeave = function onMouseLeave(d, i) {
+    const width = 6;
+    this.chartContext.setTooltip(false);
+    if (this.chartContext.checkIsMobile()) {
+      return;
+    }
+    const barGroup = d3.select(this);
+    barGroup.transition().duration(300).delay(200).attr('transform', `translate(${-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);
+  };
+  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
+    };
+    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
+    const xScale = this.getXScale(data, width);
+    // #endregion x scale
+
+    // #region y scale
+    const 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, ${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(${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(() => resizeUpdate ? 0 : delay).duration(duration).attr('transform', `translate(0, ${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(${width}, 0)`).call(d3.axisRight().scale(yScale).ticks(4));
+    // #endregion y axis
+
+    // #region bar measures functions
+    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
+
+    const chartContext = this;
+    // #region bars
+    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;
+    });
+    const barGroupsEnter = barGroups.enter().append('g').attr('class', 'stackedBar').attr('transform', `translate(${-hThickness}, 0)`).each(function bindContext(d, i) {
+      d3.select(this).node().chartContext = chartContext;
+      d3.select(this).node().xScale = xScale;
+    }).on('mouseenter', tooltip ? this.onMouseEnter : () => {}).on('mouseleave', tooltip ? this.onMouseLeave : () => {});
+
+    // #region gainBar
+    barGroupsEnter.append('rect').attr('class', 'stackedBar__gain').attr('fill', `url(#${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(#${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', (d, i) => xScale(d.year) + xScale.bandwidth() / 2).attr('y', d => gainBarY(d) + gainBarHeight(d) / 2 + textOffsetTop).text(d => `€ ${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 => `€ ${d.profit}`).attr('opacity', 0);
+
+    // #endregion bars
+
+    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 => `€ ${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 => `€ ${d.profit}`);
+    barGroups.exit().remove();
+  };
+  render() {
+    const {
+      tooltipOpen,
+      dataIndex
+    } = this.state;
+    const {
+      data
+    } = this.props;
+    return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Chart, {
+      ref: el => {
+        this.chartEl = el;
+      }
+    }, data[dataIndex] && data[dataIndex].tooltip && /*#__PURE__*/React.createElement(TooltipWrapper, {
+      ref: el => {
+        this.tooltipEl = el;
+      }
+    }, /*#__PURE__*/React.createElement(Tooltip, {
+      open: tooltipOpen,
+      position: "top",
+      animation: "fade",
+      html: data[dataIndex].tooltip,
+      theme: "light",
+      arrow: true,
+      duration: 200
+    }))), /*#__PURE__*/React.createElement(LegendWrapper, {
+      noPaddingHorizontal: true
+    }, /*#__PURE__*/React.createElement(BarChartLegend, {
+      id: "roi-profit",
+      label: "Cumulative profit payouts",
+      colorTheme: "blue"
+    }), /*#__PURE__*/React.createElement(BarChartLegend, {
+      id: "roi-gain",
+      label: "Gain on price",
+      colorTheme: "red"
+    })));
+  }
+}
+ROIChart.propTypes = {
+  id: PropTypes.string.isRequired,
+  data: PropTypes.arrayOf(PropTypes.shape({
+    year: PropTypes.string.isRequired,
+    profit: PropTypes.number.isRequired,
+    gain: PropTypes.number.isRequired,
+    tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.node])
+  })).isRequired
+};
+export default ROIChart;