@symblight/react-stockcharts
Version:
Highly customizable stock charts with ReactJS and d3
293 lines (260 loc) • 13.2 kB
JavaScript
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _slicedToArray = function () { function sliceIterator(arr, i) { var _arr = []; var _n = true; var _d = false; var _e = undefined; try { for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) { _arr.push(_s.value); if (i && _arr.length === i) break; } } catch (err) { _d = true; _e = err; } finally { try { if (!_n && _i["return"]) _i["return"](); } finally { if (_d) throw _e; } } return _arr; } return function (arr, i) { if (Array.isArray(arr)) { return arr; } else if (Symbol.iterator in Object(arr)) { return sliceIterator(arr, i); } else { throw new TypeError("Invalid attempt to destructure non-iterable instance"); } }; }();
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
import React, { Component } from "react";
import PropTypes from "prop-types";
import { isDefined, hexToRGBA } from "../../utils";
import SvgPath from 'svg-path-to-canvas';
import GenericChartComponent from "../../GenericChartComponent";
import { getMouseCanvas } from "../../GenericComponent";
import { helper, Circle, Reactangle, StarPath, ExclamationPath, LoverPath, CirclePath, ClosePath, PlusePath, HomePath, FlagPath, PencilPath, PinPath, SearchPath, FilterPath, CommandPath, CursorPath, CrescentPath, RightPath, TrapezePath, TrianglePath, PolygonPath, RectanglePath } from "./shapes";
var AnnotateShape = function (_Component) {
_inherits(AnnotateShape, _Component);
function AnnotateShape(props) {
_classCallCheck(this, AnnotateShape);
var _this = _possibleConstructorReturn(this, (AnnotateShape.__proto__ || Object.getPrototypeOf(AnnotateShape)).call(this, props));
_this.renderSVG = _this.renderSVG.bind(_this);
_this.drawOnCanvas = _this.drawOnCanvas.bind(_this);
_this.isHover = _this.isHover.bind(_this);
_this.state = {
hoverSVG: false
};
return _this;
}
_createClass(AnnotateShape, [{
key: "isHover",
value: function isHover(moreProps, e) {
var _props = this.props,
onHover = _props.onHover,
width = _props.width;
if (isDefined(onHover)) {
var _helper = helper(this.props, moreProps),
rect = _helper.rect;
var _moreProps$mouseXY = _slicedToArray(moreProps.mouseXY, 2),
x = _moreProps$mouseXY[0],
y = _moreProps$mouseXY[1];
if (x >= rect.x - rect.width / 2 && y >= rect.y - rect.height / 2 && x <= rect.x + rect.width / 2 && y <= rect.y + rect.height / 2) {
return true;
}
}
return false;
}
}, {
key: "drawOnCanvas",
value: function drawOnCanvas(ctx, moreProps) {
var _props2 = this.props,
figure = _props2.figure,
width = _props2.width,
height = _props2.height,
degrees = _props2.degrees,
fill = _props2.fill,
stroke = _props2.stroke;
var _helper2 = helper(this.props, moreProps),
x = _helper2.x,
y = _helper2.y;
ctx.fillStyle = hexToRGBA(fill, 1);
var pathData = "";
switch (figure) {
case "trapeze":
pathData = TrapezePath(x, y, width, height, degrees);
break;
case "triangle":
pathData = TrianglePath(x, y, width, height, degrees);
break;
case "polygon":
pathData = PolygonPath(x, y, width, height, degrees);
break;
case "rectangle":
pathData = RectanglePath(x, y, width, height, degrees);
break;
case "cursor":
pathData = CursorPath(x, y, width, height, degrees);
break;
case "crescent":
pathData = CrescentPath(x, y, width, height, degrees);
break;
case "right":
pathData = RightPath(x, y, width, height, degrees);
break;
case "star":
pathData = StarPath(x, y, width, height, degrees);
break;
case "exclamatio":
pathData = ExclamationPath(x, y, width, height, degrees);
break;
case "lover":
pathData = LoverPath(x, y, width, height, degrees);
break;
case "circle":
pathData = CirclePath(x, y, width, height, degrees);
break;
case "close":
pathData = ClosePath(x, y, width, height, degrees);
break;
case "pluse":
pathData = PlusePath(x, y, width, height, degrees);
break;
case "home":
pathData = HomePath(x, y, width, height, degrees);
break;
case "flag":
pathData = FlagPath(x, y, width, height, degrees);
break;
case "pencil":
pathData = PencilPath(x, y, width, height, degrees);
break;
case "pin":
pathData = PinPath(x, y, width, height, degrees);
break;
case "search":
pathData = SearchPath(x, y, width, height, degrees);
break;
case "filter":
pathData = FilterPath(x, y, width, height, degrees);
break;
case "command":
pathData = CommandPath(x, y, width, height, degrees);
break;
default:
pathData = ExclamationPath(x, y, width, height, degrees);
}
var sp = new SvgPath(pathData);
sp.save().beginPath().to(ctx).fill();
}
}, {
key: "renderSVG",
value: function renderSVG(moreProps) {
var xAccessor = moreProps.xAccessor;
var xScale = moreProps.xScale,
yScale = moreProps.chartConfig.yScale,
plotData = moreProps.plotData;
var _props3 = this.props,
fill = _props3.fill,
degrees = _props3.degrees,
width = _props3.width,
height = _props3.height,
onHover = _props3.onHover,
interactiveCursorClass = _props3.interactiveCursorClass;
var _helper3 = helper(this.props, moreProps),
x = _helper3.x,
y = _helper3.y;
var figure = this.props.figure;
var pathData = "";
switch (figure) {
case "cursor":
pathData = CursorPath(x, y, width, height, degrees);
break;
case "crescent":
pathData = CrescentPath(x, y, width, height, degrees);
break;
case "right":
pathData = RightPath(x, y, width, height, degrees);
break;
case "star":
pathData = StarPath(x, y, width, height, degrees);
break;
case "exclamatio":
pathData = ExclamationPath(x, y, width, height, degrees);
break;
case "lover":
pathData = LoverPath(x, y, width, height, degrees);
break;
case "circle":
pathData = CirclePath(x, y, width, height, degrees);
break;
case "close":
pathData = ClosePath(x, y, width, height, degrees);
break;
case "pluse":
pathData = PlusePath(x, y, width, height, degrees);
break;
case "home":
pathData = HomePath(x, y, width, height, degrees);
break;
case "flag":
pathData = FlagPath(x, y, width, height, degrees);
break;
case "pencil":
pathData = PencilPath(x, y, width, height, degrees);
break;
case "pin":
pathData = PinPath(x, y, width, height, degrees);
break;
case "search":
pathData = SearchPath(x, y, width, height, degrees);
break;
case "filter":
pathData = FilterPath(x, y, width, height, degrees);
break;
case "command":
pathData = CommandPath(x, y, width, height, degrees);
break;
default:
pathData = ExclamationPath(x, y, width, height, degrees);
}
return React.createElement(
"g",
{
className: "react-stockcharts-enable-interaction " + interactiveCursorClass,
fill: fill
},
React.createElement("path", {
d: pathData,
onClick: function onClick() {
return console.log(111);
},
onMouseMove: function onMouseMove() {
onHover(_extends({}, moreProps, { hovering: true, show: true }));
}
})
);
}
}, {
key: "render",
value: function render() {
var _props4 = this.props,
interactiveCursorClass = _props4.interactiveCursorClass,
selected = _props4.selected,
onDragStart = _props4.onDragStart,
onDrag = _props4.onDrag,
onDragComplete = _props4.onDragComplete,
onHover = _props4.onHover,
onUnHover = _props4.onUnHover;
return React.createElement(GenericChartComponent, {
isHover: this.isHover,
svgDraw: this.renderSVG,
canvasDraw: this.drawOnCanvas,
canvasToDraw: getMouseCanvas,
interactiveCursorClass: interactiveCursorClass,
selected: selected,
onDragStart: function onDragStart() {
return console.log('onDragStart');
},
onDrag: function onDrag() {
return console.log('onDrag');
},
onDragComplete: onDragComplete,
onHover: onHover,
onUnHover: onUnHover,
drawOn: ["mousemove", "pan", "drag"]
});
}
}]);
return AnnotateShape;
}(Component);
AnnotateShape.propTypes = {
className: PropTypes.string,
usingProps: PropTypes.object,
stroke: PropTypes.string.isRequired,
fill: PropTypes.string.isRequired,
opacity: PropTypes.number.isRequired
};
AnnotateShape.defaultProps = {
className: "react-stockcharts-annotate react-stockcharts-default-cursor",
degrees: 0
};
export default AnnotateShape;
//# sourceMappingURL=AnnotateShape.js.map