rrag/.block

## .block
license: MIT
height: 420

## README.md

      
    Raw
  

              README.md
            
          
    TEST

  
## index.html
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>React Stockcharts - VolumeProfileChart 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("./VolumeProfileChart.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>

## VolumeProfileChart.jsx
"use strict";
var { ChartCanvas, Chart, series, scale, coordinates, tooltip, axes, indicator, helper } = ReStock;


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

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

var { OHLCTooltip, MovingAverageTooltip } = tooltip;
var { XAxis, YAxis } = axes;
var { ema, sma, change } = indicator;

var { fitWidth, TypeChooser } = helper;

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

		var ema20 = ema()
			.id(0)
			.windowSize(20)
			.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 changeCalculator = change();

		return (
			<ChartCanvas ratio={ratio} width={width} height={400}
					margin={{left: 80, right: 80, top:10, bottom: 30}} type={type}
					seriesName="MSFT"
					data={data} calculator={[ema20, ema50, changeCalculator]}
					xExtents={[new Date(2014, 9, 1), new Date(2015, 2, 2)]}
					xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}>
				<Chart id={2}
						yExtents={[d => d.volume]}
						height={150} origin={(w, h) => [0, h - 150]}>
					<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}
							widthRatio={0.95}
							opacity={0.3}
							fill={d => d.close > d.open ? "#6BA583" : "#FF0000"} />
				</Chart>
				<Chart id={1}
						yExtents={[d => [d.high, d.low], ema20.accessor(), ema50.accessor()]}
						padding={{ top: 40, bottom: 20 }}>
					<XAxis axisAt="bottom" orient="bottom"/>
					<YAxis axisAt="right" orient="right" ticks={5} />
					<MouseCoordinateX
						at="bottom"
						orient="bottom"
						displayFormat={d3.timeFormat("%Y-%m-%d")} />
					<MouseCoordinateY
						at="right"
						orient="right"
						displayFormat={d3.format(".2f")} />

					<VolumeProfileSeries />
					<CandlestickSeries />
					<LineSeries yAccessor={ema20.accessor()} stroke={ema20.stroke()}/>
					<LineSeries yAccessor={ema50.accessor()} stroke={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]}/>
				</Chart>
				<CrossHairCursor />
			</ChartCanvas>
		);
	}
}

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

VolumeProfileChart.defaultProps = {
	type: "svg",
};
VolumeProfileChart = fitWidth(VolumeProfileChart);


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 => <VolumeProfileChart data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
});
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>React Stockcharts - VolumeProfileChart 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("./VolumeProfileChart.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, tooltip, axes, indicator, helper } = ReStock;



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

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

	var { OHLCTooltip, MovingAverageTooltip } = tooltip;
	var { XAxis, YAxis } = axes;
	var { ema, sma, change } = indicator;

	var { fitWidth, TypeChooser } = helper;

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

	var ema20 = ema()
	.id(0)
	.windowSize(20)
	.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 changeCalculator = change();

	return (
	<ChartCanvas ratio={ratio} width={width} height={400}
	margin={{left: 80, right: 80, top:10, bottom: 30}} type={type}
	seriesName="MSFT"
	data={data} calculator={[ema20, ema50, changeCalculator]}
	xExtents={[new Date(2014, 9, 1), new Date(2015, 2, 2)]}
	xAccessor={d => d.date} xScaleProvider={discontinuousTimeScaleProvider}>
	<Chart id={2}
	yExtents={[d => d.volume]}
	height={150} origin={(w, h) => [0, h - 150]}>
	<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}
	widthRatio={0.95}
	opacity={0.3}
	fill={d => d.close > d.open ? "#6BA583" : "#FF0000"} />
	</Chart>
	<Chart id={1}
	yExtents={[d => [d.high, d.low], ema20.accessor(), ema50.accessor()]}
	padding={{ top: 40, bottom: 20 }}>
	<XAxis axisAt="bottom" orient="bottom"/>
	<YAxis axisAt="right" orient="right" ticks={5} />
	<MouseCoordinateX
	at="bottom"
	orient="bottom"
	displayFormat={d3.timeFormat("%Y-%m-%d")} />
	<MouseCoordinateY
	at="right"
	orient="right"
	displayFormat={d3.format(".2f")} />

	<VolumeProfileSeries />
	<CandlestickSeries />
	<LineSeries yAccessor={ema20.accessor()} stroke={ema20.stroke()}/>
	<LineSeries yAccessor={ema50.accessor()} stroke={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]}/>
	</Chart>
	<CrossHairCursor />
	</ChartCanvas>
	);
	}
	}

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

	VolumeProfileChart.defaultProps = {
	type: "svg",
	};
	VolumeProfileChart = fitWidth(VolumeProfileChart);


	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 => <VolumeProfileChart data={data} type={type} />}</TypeChooser>, document.getElementById("chart"));
	});