text: import React from "react";
  import PropTypes from "prop-types";
  
  import { ImpulseSpinner } from "react-spinners-kit";
  import { SpinnerContainer } from "../../Styles/Reports/Reports";
  
  import { format } from "d3-format";
  import { timeFormat } from "d3-time-format";
  
  import { ChartCanvas, Chart } from "react-stockcharts";
  import {
    BarSeries,
    AreaSeries,
    CandlestickSeries,
    LineSeries,
    MACDSeries
  } from "react-stockcharts/lib/series";
  import { XAxis, YAxis } from "react-stockcharts/lib/axes";
  import {
    CrossHairCursor,
    EdgeIndicator,
    CurrentCoordinate,
    MouseCoordinateX,
    MouseCoordinateY
  } from "react-stockcharts/lib/coordinates";
  
  import { discontinuousTimeScaleProvider } from "react-stockcharts/lib/scale";
  import {
    OHLCTooltip,
    MovingAverageTooltip,
    MACDTooltip
  } from "react-stockcharts/lib/tooltip";
  import { ema, macd, sma } from "react-stockcharts/lib/indicator";
  import { fitWidth } from "react-stockcharts/lib/helper";
  
  const macdAppearance = {
    stroke: {
      macd: "#FF0000",
      signal: "#00F300"
    },
    fill: {
      divergence: "#4682B4"
    }
  };
  
  const mouseEdgeAppearance = {
    textFill: "#542605",
    stroke: "#05233B",
    strokeOpacity: 1,
    strokeWidth: 3,
    arrowWidth: 5,
    fill: "#BCDEFA"
  };
  
  class MACDChart extends React.Component {
    render() {
      const { type, data: initialData, width, ratio } = this.props;
      const ema26 = ema()
        .id(0)
        .options({ windowSize: 26 })
        .merge((d, c) => {
          d.ema26 = c;
        })
        .accessor(d => d.ema26);
  
      const ema12 = ema()
        .id(1)
        .options({ windowSize: 12 })
        .merge((d, c) => {
          d.ema12 = c;
        })
        .accessor(d => d.ema12);
  
      const macdCalculator = macd()
        .options({
          fast: 12,
          slow: 26,
          signal: 9
        })
        .merge((d, c) => {
          d.macd = c;
        })
        .accessor(d => d.macd);
  
      const smaVolume50 = sma()
        .id(3)
        .options({
          windowSize: 50,
          sourcePath: "volume"
        })
        .merge((d, c) => {
          d.smaVolume50 = c;
        })
        .accessor(d => d.smaVolume50);
  
      const calculatedData = smaVolume50(
        macdCalculator(ema12(ema26(initialData)))
      );
      const xScaleProvider = discontinuousTimeScaleProvider.inputDateAccessor(
        d => d.date
      );
      const { data, xScale, xAccessor, displayXAccessor } = xScaleProvider(
        calculatedData
      );
  
      if (!data.length) {
        return (
          <SpinnerContainer>
            <ImpulseSpinner size={30} frontColor="#EFEFEF" backColor="#301548" />
          </SpinnerContainer>
        );
      }
  
      return (
        <ChartCanvas
          height={600}
          width={width}
          ratio={ratio}
          margin={{ left: 70, right: 70, top: 20, bottom: 30 }}
          type={type}
          seriesName="MSFT"
          data={data}
          xScale={xScale}
          xAccessor={xAccessor}
          displayXAccessor={displayXAccessor}
        >
          <Chart
            id={1}
            height={400}
            yExtents={[d => [d.high, d.low], ema26.accessor(), ema12.accessor()]}
            padding={{ top: 60, bottom: 20 }}
          >
            <XAxis
              axisAt="bottom"
              orient="bottom"
              showTicks={false}
              outerTickSize={0}
            />
            <YAxis axisAt="right" orient="right" ticks={5} />
  
            <MouseCoordinateY
              at="right"
              orient="right"
              displayFormat={format(".2f")}
              {...mouseEdgeAppearance}
            />
  
            <CandlestickSeries />
            <LineSeries yAccessor={ema26.accessor()} stroke={ema26.stroke()} />
            <LineSeries yAccessor={ema12.accessor()} stroke={ema12.stroke()} />
  
            <CurrentCoordinate
              yAccessor={ema26.accessor()}
              fill={ema26.stroke()}
            />
            <CurrentCoordinate
              yAccessor={ema12.accessor()}
              fill={ema12.stroke()}
            />
  
            <EdgeIndicator
              itemType="last"
              orient="right"
              edgeAt="right"
              yAccessor={d => d.close}
              fill={d => (d.close > d.open ? "#A2F5BF" : "#F9ACAA")}
              stroke={d => (d.close > d.open ? "#0B4228" : "#6A1B19")}
              textFill={d => (d.close > d.open ? "#0B4228" : "#420806")}
              strokeOpacity={1}
              strokeWidth={3}
              arrowWidth={2}
            />
  
            <OHLCTooltip origin={[-40, 0]} />
            <MovingAverageTooltip
              onClick={e => console.log(e)}
              origin={[-38, 15]}
              options={[
                {
                  yAccessor: ema26.accessor(),
                  type: "EMA",
                  stroke: ema26.stroke(),
                  windowSize: ema26.options().windowSize
                },
                {
                  yAccessor: ema12.accessor(),
                  type: "EMA",
                  stroke: ema12.stroke(),
                  windowSize: ema12.options().windowSize
                }
              ]}
            />
          </Chart>
          <Chart
            id={2}
            height={150}
            yExtents={[d => d.volume, smaVolume50.accessor()]}
            origin={(w, h) => [0, h - 300]}
          >
            <YAxis
              axisAt="left"
              orient="left"
              ticks={5}
              tickFormat={format(".2s")}
            />
  
            <MouseCoordinateY
              at="left"
              orient="left"
              displayFormat={format(".4s")}
              {...mouseEdgeAppearance}
            />
  
            <BarSeries
              yAccessor={d => d.volume}
              fill={d => (d.close > d.open ? "#6BA583" : "#FF0000")}
            />
            <AreaSeries
              yAccessor={smaVolume50.accessor()}
              stroke={smaVolume50.stroke()}
              fill={smaVolume50.fill()}
            />
          </Chart>
          <Chart
            id={3}
            height={150}
            yExtents={macdCalculator.accessor()}
            origin={(w, h) => [0, h - 150]}
            padding={{ top: 30, bottom: 10 }}
          >
            <XAxis axisAt="bottom" orient="bottom" />
            <YAxis axisAt="right" orient="right" ticks={2} />
  
            <MouseCoordinateX
              at="bottom"
              orient="bottom"
              displayFormat={timeFormat("%Y-%m-%d")}
              rectRadius={5}
              {...mouseEdgeAppearance}
            />
            <MouseCoordinateY
              at="right"
              orient="right"
              displayFormat={format(".2f")}
              {...mouseEdgeAppearance}
            />
  
            <MACDSeries yAccessor={d => d.macd} {...macdAppearance} />
            <MACDTooltip
              origin={[-38, 15]}
              yAccessor={d => d.macd}
              options={macdCalculator.options()}
              appearance={macdAppearance}
            />
          </Chart>
          <CrossHairCursor />
        </ChartCanvas>
      );
    }
  }
  
  MACDChart.propTypes = {
    data: PropTypes.array.isRequired,
    width: PropTypes.number.isRequired,
    ratio: PropTypes.number.isRequired,
    type: PropTypes.oneOf(["svg", "hybrid"]).isRequired
  };
  
  MACDChart.defaultProps = {
    type: "svg"
  };
  
  MACDChart = fitWidth(MACDChart);
  
  export default MACDChart;
  