@hn3000/react-stockcharts/lib/series/ArrowMarker.js

Highly customizable stock charts with ReactJS and d3 (tmp fork by @hn3000)

"use strict";

Object.defineProperty(exports, "__esModule", {
	value: true
});

var _react = require("react");

var _react2 = _interopRequireDefault(_react);

var _propTypes = require("prop-types");

var _propTypes2 = _interopRequireDefault(_propTypes);

var _utils = require("../utils");

function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }

function Arrow(props) {
	var className = props.className,
	    stroke = props.stroke,
	    strokeWidth = props.strokeWidth,
	    opacity = props.opacity,
	    fill = props.fill,
	    point = props.point,
	    width = props.width,
	    height = props.height,
	    dir = props.dir;


	var w = (0, _utils.functor)(width)(point.datum);
	var h = (0, _utils.functor)(height)(point.datum);
	var d = (0, _utils.functor)(dir)(point.datum);
	var x = point.x,
	    y = point.y;

	var _getArrowMeasures = getArrowMeasures(w, h, d),
	    offset = _getArrowMeasures.offset,
	    flow = _getArrowMeasures.flow,
	    base = _getArrowMeasures.base,
	    stem = _getArrowMeasures.stem,
	    flare = _getArrowMeasures.flare;

	var points = 0 != stem ? "\n\t\t" + x + "," + (y + offset) + "\n\t\t" + (x + base) + "," + (y + offset) + "\n\t\t" + (x + base) + "," + (y + offset + stem) + "\n\t\t" + (x + flare) + "," + (y + offset + stem) + "\n\t\t" + x + "," + (y + offset + flow * h) + "\n\t\t" + (x - flare) + "," + (y + offset + stem) + "\n\t\t" + (x - base) + "," + (y + offset + stem) + "\n\t\t" + (x - base) + "," + (y + offset) + "\n\t\t" : "\n\t\t" + x + "," + (y + offset) + "\n\t\t" + (x + flare) + "," + (y + offset) + "\n\t\t" + x + "," + (y + offset + flow * h) + "\n\t\t" + (x - flare) + "," + (y + offset) + "\n\t\t";

	return _react2.default.createElement("polygon", {
		className: className,
		points: points,
		stroke: stroke,
		strokeWidth: strokeWidth,
		fillOpacity: opacity,
		fill: fill
	});
}
Arrow.propTypes = {
	stroke: _propTypes2.default.string,
	fill: _propTypes2.default.string.isRequired,
	opacity: _propTypes2.default.number.isRequired,
	point: _propTypes2.default.shape({
		x: _propTypes2.default.number.isRequired,
		y: _propTypes2.default.number.isRequired,
		datum: _propTypes2.default.object.isRequired
	}).isRequired,
	className: _propTypes2.default.string,
	strokeWidth: _propTypes2.default.number,
	width: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.func]).isRequired,
	height: _propTypes2.default.oneOfType([_propTypes2.default.number, _propTypes2.default.func]).isRequired,
	dir: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.func]).isRequired
};
Arrow.defaultProps = {
	stroke: "#4682B4",
	strokeWidth: 1,
	opacity: 0.5,
	fill: "#4682B4",
	className: "react-stockcharts-marker-arrow"
};
Arrow.drawOnCanvas = function (props, point, ctx) {
	var stroke = props.stroke,
	    fill = props.fill,
	    opacity = props.opacity,
	    strokeWidth = props.strokeWidth;

	ctx.strokeStyle = stroke;
	ctx.lineWidth = strokeWidth;
	if (fill !== "none") {
		ctx.fillStyle = (0, _utils.hexToRGBA)(fill, opacity);
	}
	Arrow.drawOnCanvasWithNoStateChange(props, point, ctx);
};
Arrow.drawOnCanvasWithNoStateChange = function (props, point, ctx) {
	var width = props.width,
	    height = props.height,
	    dir = props.dir;

	var w = (0, _utils.functor)(width)(point.datum);
	var h = (0, _utils.functor)(height)(point.datum);
	var d = (0, _utils.functor)(dir)(point.datum);
	var x = point.x,
	    y = point.y;

	var _getArrowMeasures2 = getArrowMeasures(w, h, d),
	    offset = _getArrowMeasures2.offset,
	    flow = _getArrowMeasures2.flow,
	    base = _getArrowMeasures2.base,
	    stem = _getArrowMeasures2.stem,
	    flare = _getArrowMeasures2.flare;

	ctx.beginPath();

	ctx.moveTo(x, y + offset);
	if (0 !== stem) {
		ctx.lineTo(x + base, y + offset);
		ctx.lineTo(x + base, y + offset + stem);
	}
	ctx.lineTo(x + flare, y + offset + stem);
	ctx.lineTo(x, y + offset + h * flow);
	ctx.lineTo(x - flare, y + offset + stem);
	if (0 !== stem) {
		ctx.lineTo(x - base, y + offset + stem);
		ctx.lineTo(x - base, y + offset);
	}
	ctx.closePath();
	ctx.fill();
	ctx.stroke();
};
exports.default = Arrow;


function getArrowMeasures(w, h, d) {
	var up = d === "up" || d === "upto";
	var to = d === "downto" || d === "upto";

	var flow = up ? -1 : 1;
	var offset = (to ? h : 0) * -flow;

	var base = w / 6;
	var stemlength = Math.max(0, h - w);
	var stem = stemlength * flow;
	var flare = w / 2;

	return {
		offset: offset, flow: flow,
		base: base, stem: stem, flare: flare
	};
}
//# sourceMappingURL=ArrowMarker.js.map