rrag · August 19, 2019 10:55
diff --git a/.block b/.block
 license: MIT
 height: NaN
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Stockcharts - MovingAverageCrossOverAlgorithmV2 Example</title>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>

    <!-- <script type="text/javascript" src="//unpkg.com/react-stockcharts@latest/dist/react-stockcharts.min.js"></script> -->
    <script type="text/javascript" src="//rrag.github.io/react-stockcharts/dist/react-stockcharts.min.js"></script>
  </head>
  <body>
    <span id="iconPreload" class="glyphicon glyphicon-arrow-down"></span>
    <div id="chart">
    </div>
    <script>
      // Use babel transform so the examples work on the browser
      d3.request("./MovingAverageCrossOverAlgorithmV2.jsx")
        .get(function(err, data) {
          var outputEl = document.getElementById('chart');
          try {
            var output = Babel.transform(data.responseText, { presets: ["es2015", "react", "stage-3"] }).code;
            eval(output);
          } catch (ex) {
            outputEl.innerHTML = 'ERROR: ' + ex.message;
          }
        })
    </script>
  </body>
 </html>
diff --git a/MovingAverageCrossOverAlgorithmV2.jsx b/MovingAverageCrossOverAlgorithmV2.jsx
 "use strict";
 var { ChartCanvas, Chart, series, scale, coordinates, algorithm, annotation, tooltip, axes, indicator, helper } = ReStock;

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

 var { EdgeIndicator } = coordinates;
 var { CrossHairCursor, MouseCoordinateX, MouseCoordinateY, CurrentCoordinate } = coordinates;
 var { Annotate, SvgPathAnnotation, Label, buyPath, sellPath } = annotation;

 var { OHLCTooltip, MovingAverageTooltip } = tooltip;
 var { XAxis, YAxis } = axes;
 var { ema, sma } = indicator;
 var { fitWidth, TypeChooser } = helper;

 var algo = algorithm.default;

 class MovingAverageCrossOverAlgorithmV2 extends React.Component {
 	render() {
 		var { data, type, width, ratio } = this.props;

 		var ema20 = ema()
 			.id(0)
 			.windowSize(13)
 			.merge((d, c) => {d.ema20 = c})
 			.accessor(d => d.ema20);

 		var ema50 = ema()
 			.id(2)
 			.windowSize(50)
 			.merge((d, c) => {d.ema50 = c})
 			.accessor(d => d.ema50);

 		var buySell = algo()
 			.windowSize(2)
 			.accumulator(([prev, now]) => {
 				var { ema20: prevShortTerm, ema50: prevLongTerm } = prev;
 				var { ema20: nowShortTerm, ema50: nowLongTerm } = now;
 				if (prevShortTerm < prevLongTerm && nowShortTerm > nowLongTerm) return "LONG";
 				if (prevShortTerm > prevLongTerm && nowShortTerm < nowLongTerm) return "SHORT";
 			})
 			.merge((d, c) => {d.longShort = c})

 		var defaultAnnotationProps = {
 			onClick: console.log.bind(console),
 		}

 		var longAnnotationProps = {
 			...defaultAnnotationProps,
 			y: ({ yScale, datum }) => yScale(datum.low),
 			fill: "#006517",
 			path: buyPath,
 			tooltip: "Go long",
 		};

 		var shortAnnotationProps = {
 			...defaultAnnotationProps,
 			y: ({ yScale, datum }) => yScale(datum.high),
 			fill: "#FF0000",
 			path: sellPath,
 			tooltip: "Go short",
 		};

 		var margin = {left: 80, right: 80, top:30, bottom: 50};
 		var height = 400;

 		var [yAxisLabelX, yAxisLabelY] = [width -margin.left - 40, margin.top + (height - margin.top - margin.bottom) / 2]
 		return (
 			<ChartCanvas ratio={ratio} width={width} height={height}
 					margin={margin} type={type}
 					seriesName="MSFT"
 					data={data} calculator={[ema20, ema50, buySell]}
 					xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}
 					xExtents={[new Date(2015, 0, 1), new Date(2015, 5, 8)]}>

 				<Chart id={1}
 						yExtents={[d => [d.high, d.low], ema20.accessor(), ema50.accessor()]}
 						padding={{ top: 10, bottom: 20 }}>
 					<XAxis axisAt="bottom" orient="bottom"/>

 					<Label x={(width -margin.left - margin.right)/ 2} y={height - 45}
 						fontSize="12" text="XAxis Label here" />

 					<YAxis axisAt="right" orient="right" ticks={5} />

 					<Label x={yAxisLabelX} y={yAxisLabelY}
 						rotate={-90}
 						fontSize="12" text="YAxis Label here" />
 					<MouseCoordinateX
 						at="bottom"
 						orient="bottom"
 						displayFormat={d3.timeFormat("%Y-%m-%d")} />
 					<MouseCoordinateY
 						at="right"
 						orient="right"
 						displayFormat={d3.format(".2f")} />

 					<CandlestickSeries />
 					<LineSeries yAccessor={ema20.accessor()} stroke={ema20.stroke()}/>
 					<LineSeries yAccessor={ema50.accessor()} stroke={ema50.stroke()}/>

 					<CurrentCoordinate yAccessor={ema20.accessor()} fill={ema20.stroke()} />
 					<CurrentCoordinate yAccessor={ema50.accessor()} fill={ema50.stroke()} />
 					<EdgeIndicator itemType="last" orient="right" edgeAt="right"
 						yAccessor={d => d.close} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"}/>

 					<OHLCTooltip origin={[-40, 0]}/>
 					<MovingAverageTooltip onClick={(e) => console.log(e)} origin={[-38, 15]} 
 						calculators={[ema20, ema50]}/>

 					<Annotate with={SvgPathAnnotation} when={d => d.longShort === "LONG"}
 						usingProps={longAnnotationProps} />
 					<Annotate with={SvgPathAnnotation} when={d => d.longShort === "SHORT"}
 						usingProps={shortAnnotationProps} />

 				</Chart>
 				<CrossHairCursor />
 			</ChartCanvas>
 		);
 	}
 }

 /*
 					<LineSeries yAccessor={d => d.close} stroke="#000000" />

 */

 MovingAverageCrossOverAlgorithmV2.propTypes = {
 	data: React.PropTypes.array.isRequired,
 	width: React.PropTypes.number.isRequired,
 	ratio: React.PropTypes.number.isRequired,
 	type: React.PropTypes.oneOf(["svg", "hybrid"]).isRequired,
 };

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

 MovingAverageCrossOverAlgorithmV2 = fitWidth(MovingAverageCrossOverAlgorithmV2);


 var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
 d3["tsv"]("//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 => <MovingAverageCrossOverAlgorithmV2 data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
 });
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>React Stockcharts - MovingAverageCrossOverAlgorithmV2 Example</title>

	<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.2.7/d3.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.2/react-dom.min.js"></script>
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.17.0/babel.min.js"></script>

	<!-- <script type="text/javascript" src="//unpkg.com/react-stockcharts@latest/dist/react-stockcharts.min.js"></script> -->
	<script type="text/javascript" src="//rrag.github.io/react-stockcharts/dist/react-stockcharts.min.js"></script>
	</head>
	<body>
	<span id="iconPreload" class="glyphicon glyphicon-arrow-down"></span>
	<div id="chart">
	</div>
	<script>
	// Use babel transform so the examples work on the browser
	d3.request("./MovingAverageCrossOverAlgorithmV2.jsx")
	.get(function(err, data) {
	var outputEl = document.getElementById('chart');
	try {
	var output = Babel.transform(data.responseText, { presets: ["es2015", "react", "stage-3"] }).code;
	eval(output);
	} catch (ex) {
	outputEl.innerHTML = 'ERROR: ' + ex.message;
	}
	})
	</script>
	</body>
	</html>
	"use strict";
	var { ChartCanvas, Chart, series, scale, coordinates, algorithm, annotation, tooltip, axes, indicator, helper } = ReStock;

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

	var { EdgeIndicator } = coordinates;
	var { CrossHairCursor, MouseCoordinateX, MouseCoordinateY, CurrentCoordinate } = coordinates;
	var { Annotate, SvgPathAnnotation, Label, buyPath, sellPath } = annotation;

	var { OHLCTooltip, MovingAverageTooltip } = tooltip;
	var { XAxis, YAxis } = axes;
	var { ema, sma } = indicator;
	var { fitWidth, TypeChooser } = helper;

	var algo = algorithm.default;

	class MovingAverageCrossOverAlgorithmV2 extends React.Component {
	render() {
	var { data, type, width, ratio } = this.props;

	var ema20 = ema()
	.id(0)
	.windowSize(13)
	.merge((d, c) => {d.ema20 = c})
	.accessor(d => d.ema20);

	var ema50 = ema()
	.id(2)
	.windowSize(50)
	.merge((d, c) => {d.ema50 = c})
	.accessor(d => d.ema50);

	var buySell = algo()
	.windowSize(2)
	.accumulator(([prev, now]) => {
	var { ema20: prevShortTerm, ema50: prevLongTerm } = prev;
	var { ema20: nowShortTerm, ema50: nowLongTerm } = now;
	if (prevShortTerm < prevLongTerm && nowShortTerm > nowLongTerm) return "LONG";
	if (prevShortTerm > prevLongTerm && nowShortTerm < nowLongTerm) return "SHORT";
	})
	.merge((d, c) => {d.longShort = c})

	var defaultAnnotationProps = {
	onClick: console.log.bind(console),
	}

	var longAnnotationProps = {
	...defaultAnnotationProps,
	y: ({ yScale, datum }) => yScale(datum.low),
	fill: "#006517",
	path: buyPath,
	tooltip: "Go long",
	};

	var shortAnnotationProps = {
	...defaultAnnotationProps,
	y: ({ yScale, datum }) => yScale(datum.high),
	fill: "#FF0000",
	path: sellPath,
	tooltip: "Go short",
	};

	var margin = {left: 80, right: 80, top:30, bottom: 50};
	var height = 400;

	var [yAxisLabelX, yAxisLabelY] = [width -margin.left - 40, margin.top + (height - margin.top - margin.bottom) / 2]
	return (
	<ChartCanvas ratio={ratio} width={width} height={height}
	margin={margin} type={type}
	seriesName="MSFT"
	data={data} calculator={[ema20, ema50, buySell]}
	xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}
	xExtents={[new Date(2015, 0, 1), new Date(2015, 5, 8)]}>

	<Chart id={1}
	yExtents={[d => [d.high, d.low], ema20.accessor(), ema50.accessor()]}
	padding={{ top: 10, bottom: 20 }}>
	<XAxis axisAt="bottom" orient="bottom"/>

	<Label x={(width -margin.left - margin.right)/ 2} y={height - 45}
	fontSize="12" text="XAxis Label here" />

	<YAxis axisAt="right" orient="right" ticks={5} />

	<Label x={yAxisLabelX} y={yAxisLabelY}
	rotate={-90}
	fontSize="12" text="YAxis Label here" />
	<MouseCoordinateX
	at="bottom"
	orient="bottom"
	displayFormat={d3.timeFormat("%Y-%m-%d")} />
	<MouseCoordinateY
	at="right"
	orient="right"
	displayFormat={d3.format(".2f")} />

	<CandlestickSeries />
	<LineSeries yAccessor={ema20.accessor()} stroke={ema20.stroke()}/>
	<LineSeries yAccessor={ema50.accessor()} stroke={ema50.stroke()}/>

	<CurrentCoordinate yAccessor={ema20.accessor()} fill={ema20.stroke()} />
	<CurrentCoordinate yAccessor={ema50.accessor()} fill={ema50.stroke()} />
	<EdgeIndicator itemType="last" orient="right" edgeAt="right"
	yAccessor={d => d.close} fill={d => d.close > d.open ? "#6BA583" : "#FF0000"}/>

	<OHLCTooltip origin={[-40, 0]}/>
	<MovingAverageTooltip onClick={(e) => console.log(e)} origin={[-38, 15]}
	calculators={[ema20, ema50]}/>

	<Annotate with={SvgPathAnnotation} when={d => d.longShort === "LONG"}
	usingProps={longAnnotationProps} />
	<Annotate with={SvgPathAnnotation} when={d => d.longShort === "SHORT"}
	usingProps={shortAnnotationProps} />

	</Chart>
	<CrossHairCursor />
	</ChartCanvas>
	);
	}
	}

	/*
	<LineSeries yAccessor={d => d.close} stroke="#000000" />

	*/

	MovingAverageCrossOverAlgorithmV2.propTypes = {
	data: React.PropTypes.array.isRequired,
	width: React.PropTypes.number.isRequired,
	ratio: React.PropTypes.number.isRequired,
	type: React.PropTypes.oneOf(["svg", "hybrid"]).isRequired,
	};

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

	MovingAverageCrossOverAlgorithmV2 = fitWidth(MovingAverageCrossOverAlgorithmV2);


	var parseDate = d3.timeParse("%Y-%m-%d %H:%M:%S");
	d3["tsv"]("//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 => <MovingAverageCrossOverAlgorithmV2 data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
	});