content: import {
    AreaSeries,
    DiscreteColorLegend,
    FlexibleXYPlot,
    GradientDefs,
    LineSeries,
    YAxis
  } from 'react-vis';
  import React, { Component } from 'react';
  
  import { MorphIcon } from 'react-svg-buttons';
  import { Result } from 'antd-mobile';
  
  const tabStyle = {
    height: '100%',
    backgroundColor: '#fff'
  };
  const ITEMS = [
    { title: 'Target Takt Time', color: '#79c7e3' },
    { title: 'Avg Takt Time', color: '#ff9833' },
    { title: 'Avg Takt Time w/o loss', color: '#1a3177' }
  ];
  
  export default class Trend extends Component {
    shouldComponentUpdate(nextProps, nextState) {
      if (this.props.data.length !== nextProps.data.length) {
        return true;
      }
      return false;
    }
    render() {
      if (!this.props.data || this.props.data.length < 3)
        return (
          <Result
            img={<MorphIcon type="ban" size={60} />}
            title="Collect at least four measures"
            message="Here you will see the trend and avarage takt"
          />
        );
      const dataArr = this.props.data.map(d => {
        return {
          x: d.stop,
          y: d.cycleTime
        };
      });
      const dataArr2 = this.props.data.map(d => {
        return {
          x: d.stop,
          y: this.props.designCycleTime
        };
      });
      const dataArr3 = this.props.data.map(d => {
        return {
          x: d.stop,
          y: this.props.avgFiltered
        };
      });
      const dataArr4 = this.props.data.map(d => {
        return {
          x: d.stop,
          y: this.props.avg
        };
      });
      return (
        <div style={tabStyle}>
          <FlexibleXYPlot
            xType="ordinal"
            animation
            margin={{ right: 0, bottom: 0 }}
          >
            <DiscreteColorLegend
              className={'test-class-name'}
              orientation="horizontal"
              width={300}
              items={ITEMS}
            />
            <GradientDefs>
              <linearGradient id="CoolGradient" x1="0" x2="0" y1="0" y2="1">
                <stop offset="0%" stopColor="red" stopOpacity={0.4} />
                <stop offset="100%" stopColor="blue" stopOpacity={0.3} />
              </linearGradient>
            </GradientDefs>
            <YAxis attr="y" attrAxis="x" orientation="left" />
            <AreaSeries
              color={'url(#CoolGradient)'}
              data={dataArr}
              curve="curveNatural"
            />
            <LineSeries data={dataArr2} />
            <LineSeries
              style={{
                strokeDasharray: '2 2'
              }}
              data={dataArr3}
              strokeDasharray="7, 3"
            />
            <LineSeries
              style={{
                strokeDasharray: '2 2'
              }}
              data={dataArr4}
              strokeDasharray="7, 3"
            />
          </FlexibleXYPlot>
        </div>
      );
    }
  }
  