ZIL LONG TARGET : $0.40

"use strict";
var { ChartCanvas, Chart, series, scale, coordinates, tooltip, axes, indicator, helper, interactive } = ReStock;

var { CandlestickSeries, BarSeries, LineSeries, AreaSeries, MACDSeries } = series;
var { discontinuousTimeScaleProvider } = scale;

var { CrossHairCursor, MouseCoordinateX, MouseCoordinateY, CurrentCoordinate } = coordinates;
var { EdgeIndicator } = coordinates;

var { OHLCTooltip, MovingAverageTooltip, MACDTooltip } = tooltip;

var { XAxis, YAxis } = axes;
var { macd, ema, sma } = indicator;

var { fitWidth, TypeChooser } = helper;

var { FibonacciRetracement, TrendLine } = interactive;


class CandleStickChartWithFibonacciInteractiveIndicator extends React.Component {
constructor(props) {
super(props);
this.onKeyPress = this.onKeyPress.bind(this);
this.onFibComplete = this.onFibComplete.bind(this);
this.state = {
enableFib: true
}
}
componentDidMount() {
document.addEventListener("keyup", this.onKeyPress);
}
componentWillUnmount() {
document.removeEventListener("keyup", this.onKeyPress);
}
onFibComplete() {
this.setState({
enableFib: false
})
}
onKeyPress(e) {
var keyCode = e.which;
switch (keyCode) {
case 46: { // DEL
this.refs.fib.removeLast();
break;
}
case 27: { // ESC
this.refs.fib.terminate();
this.setState({
enableFib: false
})
break;
}
case 68: // D - Draw Fib
case 69: { // E - Enable Fib
this.setState({
enableFib: true
})
break;
}
}

}
render() {
var { data, type, width, ratio } = this.props;
var ema26 = ema()
.id(0)
.windowSize(26)
.merge((d, c) => {d.ema26 = c})
.accessor(d => d.ema26);

var ema12 = ema()
.id(1)
.windowSize(12)
.merge((d, c) => {d.ema12 = c})
.accessor(d => d.ema12);

var macdCalculator = macd()
.fast(12)
.slow(26)
.signal(9)
.merge((d, c) => {d.macd = c})
.accessor(d => d.macd);

var smaVolume50 = sma()
.id(3)
.windowSize(10)
.sourcePath("volume")
.merge((d, c) => {d.smaVolume50 = c})
.accessor(d => d.smaVolume50);

return (
<ChartCanvas ratio={ratio} width={width} height={600}
margin={{left: 70, right: 70, top:20, bottom: 30}} type={type}
seriesName="MSFT"
data={data} calculator={}
xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}
xExtents={}
drawMode={this.state.enableFib}>
<Chart id={1} height={400}
yExtents={, ema26.accessor(), ema12.accessor()]}
padding={{ top: 10, bottom: 20 }}>
<XAxis axisAt="bottom" orient="bottom" showTicks={false} outerTickSize={0} />
<YAxis axisAt="right" orient="right" ticks={5} />
<MouseCoordinateY
at="right"
orient="right"
displayFormat={d3.format(".2f")} />

<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 ? "#6BA583" : "#FF0000"}/>

<OHLCTooltip origin={}/>
<MovingAverageTooltip onClick={(e) => console.log(e)} origin={}
calculators={}/>

<FibonacciRetracement ref="fib"
enabled={this.state.enableFib}
type="BOUND"
onComplete={this.onFibComplete}/>
</Chart>
<Chart id={2} height={150}
yExtents={}
origin={(w, h) => }>
<YAxis axisAt="left" orient="left" ticks={5} tickFormat={d3.format(".0s")}/>

<MouseCoordinateY
at="left"
orient="left"
displayFormat={d3.format(".4s")} />

<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) => } padding={{ top: 10, bottom: 10 }} >
<XAxis axisAt="bottom" orient="bottom"/>
<YAxis axisAt="right" orient="right" ticks={2} />
<MouseCoordinateX
at="bottom"
orient="bottom"
displayFormat={d3.timeFormat("%Y-%m-%d")} />
<MouseCoordinateY
at="right"
orient="right"
displayFormat={d3.format(".2f")} />

<MACDSeries calculator={macdCalculator} />

<MACDTooltip origin={} calculator={macdCalculator}/>
</Chart>
<CrossHairCursor />
</ChartCanvas>
);
}
}
CandleStickChartWithFibonacciInteractiveIndicator.propTypes = {
data: React.PropTypes.array.isRequired,
width: React.PropTypes.number.isRequired,
ratio: React.PropTypes.number.isRequired,
type: React.PropTypes.oneOf().isRequired,
};

CandleStickChartWithFibonacciInteractiveIndicator.defaultProps = {
type: "svg",
};

CandleStickChartWithFibonacciInteractiveIndicator = fitWidth(CandleStickChartWithFibonacciInteractiveIndicator);


var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
d3("//rrag.github.io/react-stockcharts/data/MSFT.tsv", (err, data) => {
/* change MSFT.tsv to MSFT_full.tsv above to see how this works with lots of data points */
data.forEach((d, i) => {
d.date = new Date(d3.timeParse("%Y-%m-%d")(d.date).getTime());
d.open = +d.open;
d.high = +d.high;
d.low = +d.low;
d.close = +d.close;
d.volume = +d.volume;
// console.log(d);
});
/* change the type from hybrid to svg to compare the performance between svg and canvas */
ReactDOM.render(<TypeChooser type="hybrid">{type => <CandleStickChartWithFibonacciInteractiveIndicator data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
});