@stokr/components-library 0.5.6 → 0.5.7

package/dist/ROI/ROI.js

@@ -1,261 +0,0 @@
-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

@@ -1,71 +0,0 @@
-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

@@ -1,348 +0,0 @@
-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;