@data-ui/xy-chart
Version:
A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui
256 lines (223 loc) • 7.93 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = exports.propTypes = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _theme = require("@data-ui/theme");
var _Brush = _interopRequireDefault(require("../utils/brush/Brush"));
var _propShapes = require("../utils/propShapes");
var _chartUtils = require("../utils/chartUtils");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _inheritsLoose(subClass, superClass) { subClass.prototype = Object.create(superClass.prototype); subClass.prototype.constructor = subClass; subClass.__proto__ = superClass; }
function _assertThisInitialized(self) { if (self === void 0) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return self; }
var SAFE_PIXEL = 2;
var propTypes = {
selectedBoxStyle: _propShapes.generalStyleShape,
xScale: _propTypes.default.func,
yScale: _propTypes.default.func,
innerHeight: _propTypes.default.number,
innerWidth: _propTypes.default.number,
onChange: _propTypes.default.func,
onBrushStart: _propTypes.default.func,
onBrushEnd: _propTypes.default.func,
onMouseMove: _propTypes.default.func,
onMouseLeave: _propTypes.default.func,
onClick: _propTypes.default.func,
margin: _propShapes.marginShape,
brushDirection: _propTypes.default.oneOf(['vertical', 'horizontal', 'both']),
resizeTriggerAreas: _propTypes.default.arrayOf(_propTypes.default.oneOf(['left', 'right', 'top', 'bottom', 'topLeft', 'topRight', 'bottomLeft', 'bottomRight'])),
brushRegion: _propTypes.default.oneOf(['xAxis', 'yAxis', 'chart']),
yAxisOrientation: _propTypes.default.oneOf(['left', 'right']),
xAxisOrientation: _propTypes.default.oneOf(['top', 'bottom']),
disableDraggingSelection: _propTypes.default.bool,
handleSize: _propTypes.default.number
};
exports.propTypes = propTypes;
var defaultProps = {
xScale: null,
yScale: null,
onChange: null,
innerHeight: 0,
innerWidth: 0,
selectedBoxStyle: {
fill: _theme.color.default,
fillOpacity: 0.2,
stroke: _theme.color.default,
strokeWidth: 1,
strokeOpacity: 0.8
},
margin: {
top: 0,
left: 0,
right: 0,
bottom: 0
},
handleSize: 4,
brushDirection: 'horizontal',
resizeTriggerAreas: ['left', 'right'],
brushRegion: 'chart',
yAxisOrientation: 'right',
xAxisOrientation: 'bottom',
onBrushStart: null,
onBrushEnd: null,
disableDraggingSelection: false,
onMouseMove: null,
onMouseLeave: null,
onClick: null
};
var Brush =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(Brush, _React$Component);
function Brush(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.BaseBrush = null;
_this.handleChange = _this.handleChange.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.handleBrushStart = _this.handleBrushStart.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.handleBrushEnd = _this.handleBrushEnd.bind(_assertThisInitialized(_assertThisInitialized(_this)));
_this.reset = _this.reset.bind(_assertThisInitialized(_assertThisInitialized(_this)));
return _this;
}
var _proto = Brush.prototype;
_proto.reset = function reset() {
this.BaseBrush.reset();
};
_proto.handleChange = function handleChange(brush) {
var onChange = this.props.onChange;
if (!onChange) return;
var x0 = brush.extent.x0;
if (x0 < 0 || typeof x0 === 'undefined') {
onChange(null);
return;
}
var domain = this.convertRangeToDomain(brush);
onChange(domain);
};
_proto.convertRangeToDomain = function convertRangeToDomain(brush) {
var _this$props = this.props,
xScale = _this$props.xScale,
yScale = _this$props.yScale;
var _brush$extent = brush.extent,
x0 = _brush$extent.x0,
x1 = _brush$extent.x1,
y0 = _brush$extent.y0,
y1 = _brush$extent.y1;
var xDomain = (0, _chartUtils.getDomainFromExtent)(xScale, x0, x1, SAFE_PIXEL);
var yDomain = (0, _chartUtils.getDomainFromExtent)(yScale, y0, y1, SAFE_PIXEL);
var domain = {
x0: xDomain.start,
x1: xDomain.end,
xValues: xDomain.values,
y0: yDomain.start,
y1: yDomain.end,
yValues: yDomain.values
};
return domain;
};
_proto.handleBrushStart = function handleBrushStart(point) {
var x = point.x,
y = point.y;
var _this$props2 = this.props,
onBrushStart = _this$props2.onBrushStart,
xScale = _this$props2.xScale,
yScale = _this$props2.yScale;
var invertedX = (0, _chartUtils.scaleInvert)(xScale, x);
var invertedY = (0, _chartUtils.scaleInvert)(yScale, y);
if (onBrushStart) {
onBrushStart({
x: xScale.invert ? invertedX : xScale.domain()[invertedX],
y: yScale.invert ? invertedY : yScale.domain()[invertedY]
});
}
};
_proto.handleBrushEnd = function handleBrushEnd(brush) {
var onBrushEnd = this.props.onBrushEnd;
if (!onBrushEnd) return;
var x0 = brush.extent.x0;
if (x0 < 0) {
onBrushEnd(null);
return;
}
var domain = this.convertRangeToDomain(brush);
onBrushEnd(domain);
};
_proto.render = function render() {
var _this2 = this;
var _this$props3 = this.props,
xScale = _this$props3.xScale,
yScale = _this$props3.yScale,
innerHeight = _this$props3.innerHeight,
innerWidth = _this$props3.innerWidth,
margin = _this$props3.margin,
brushDirection = _this$props3.brushDirection,
resizeTriggerAreas = _this$props3.resizeTriggerAreas,
brushRegion = _this$props3.brushRegion,
yAxisOrientation = _this$props3.yAxisOrientation,
xAxisOrientation = _this$props3.xAxisOrientation,
selectedBoxStyle = _this$props3.selectedBoxStyle,
disableDraggingSelection = _this$props3.disableDraggingSelection,
onMouseLeave = _this$props3.onMouseLeave,
onMouseMove = _this$props3.onMouseMove,
onClick = _this$props3.onClick,
handleSize = _this$props3.handleSize;
if (!xScale || !yScale) return null;
var brushRegionWidth;
var brushRegionHeight;
var left;
var top;
if (brushRegion === 'chart') {
left = 0;
top = 0;
brushRegionWidth = innerWidth;
brushRegionHeight = innerHeight;
} else if (brushRegion === 'yAxis') {
top = 0;
brushRegionHeight = innerHeight;
if (yAxisOrientation === 'right') {
left = innerWidth;
brushRegionWidth = margin.right;
} else {
left = -margin.left;
brushRegionWidth = margin.left;
}
} else {
left = 0;
brushRegionWidth = innerWidth;
if (xAxisOrientation === 'bottom') {
top = innerHeight;
brushRegionHeight = margin.bottom;
} else {
top = -margin.top;
brushRegionHeight = margin.top;
}
}
return _react.default.createElement(_Brush.default, {
width: brushRegionWidth,
height: brushRegionHeight,
left: left,
top: top,
inheritedMargin: margin,
onChange: this.handleChange,
onBrushEnd: this.handleBrushEnd,
onBrushStart: this.handleBrushStart,
handleSize: handleSize,
resizeTriggerAreas: resizeTriggerAreas,
brushDirection: brushDirection,
selectedBoxStyle: selectedBoxStyle,
disableDraggingSelection: disableDraggingSelection,
onMouseLeave: onMouseLeave,
onMouseMove: onMouseMove,
onClick: onClick,
ref: function ref(el) {
_this2.BaseBrush = el;
}
});
};
return Brush;
}(_react.default.Component);
Brush.propTypes = propTypes;
Brush.defaultProps = defaultProps;
Brush.displayName = 'Brush';
var _default = Brush;
exports.default = _default;