@data-ui/xy-chart
Version:
A package of charts with standard x- and y- axes. https://williaster.github.io/data-ui
135 lines (110 loc) • 4.34 kB
JavaScript
"use strict";
exports.__esModule = true;
exports.default = void 0;
var _react = _interopRequireDefault(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _shape = require("@vx/shape");
var _theme = require("@data-ui/theme");
var _propShapes = require("../utils/propShapes");
var _getScaleForAccessor = require("../utils/getScaleForAccessor");
var _sharedSeriesProps = _interopRequireDefault(require("../utils/sharedSeriesProps"));
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 _extends() { _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; }; return _extends.apply(this, arguments); }
var propTypes = _extends({}, _sharedSeriesProps.default, {
data: _propShapes.stackedBarSeriesDataShape.isRequired,
stackKeys: _propTypes.default.arrayOf(_propTypes.default.string).isRequired,
stackFills: _propTypes.default.arrayOf(_propTypes.default.string),
stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number])
});
var defaultProps = {
stackFills: _theme.color.categories,
stroke: '#FFFFFF',
strokeWidth: 1
};
var x = function x(d) {
return d.x;
};
var noEventsStyles = {
pointerEvents: 'none'
};
var StackedBarSeries =
/*#__PURE__*/
function (_React$PureComponent) {
_inheritsLoose(StackedBarSeries, _React$PureComponent);
function StackedBarSeries() {
return _React$PureComponent.apply(this, arguments) || this;
}
var _proto = StackedBarSeries.prototype;
_proto.render = function render() {
var _this$props = this.props,
data = _this$props.data,
disableMouseEvents = _this$props.disableMouseEvents,
stackKeys = _this$props.stackKeys,
stackFills = _this$props.stackFills,
stroke = _this$props.stroke,
strokeWidth = _this$props.strokeWidth,
xScale = _this$props.xScale,
yScale = _this$props.yScale,
onClick = _this$props.onClick,
onMouseMove = _this$props.onMouseMove,
onMouseLeave = _this$props.onMouseLeave;
if (!xScale || !yScale) return null;
if (!xScale.bandwidth) {
// @todo figure this out/be more graceful
throw new Error("'StackedBarSeries' requires a 'band' type xScale");
}
var maxHeight = (yScale.range() || [0])[0];
var zScale = _getScaleForAccessor.scaleTypeToScale.ordinal({
range: stackFills,
domain: stackKeys
});
return _react.default.createElement(_shape.BarStack, {
style: disableMouseEvents ? noEventsStyles : null,
data: data,
keys: stackKeys,
height: maxHeight,
x: x,
xScale: xScale,
yScale: yScale,
zScale: zScale,
stroke: stroke,
strokeWidth: strokeWidth,
onClick: disableMouseEvents ? null : onMouseMove && function (d) {
return function (event) {
var datum = d.data,
seriesKey = d.key;
onClick({
event: event,
data: data,
datum: datum,
seriesKey: seriesKey,
color: zScale(seriesKey)
});
};
},
onMouseMove: disableMouseEvents ? null : onMouseMove && function (d) {
return function (event) {
var datum = d.data,
key = d.key;
onMouseMove({
event: event,
data: data,
datum: datum,
seriesKey: key,
color: zScale(key)
});
};
},
onMouseLeave: disableMouseEvents ? null : onMouseLeave && function () {
return onMouseLeave;
}
});
};
return StackedBarSeries;
}(_react.default.PureComponent);
exports.default = StackedBarSeries;
StackedBarSeries.propTypes = propTypes;
StackedBarSeries.defaultProps = defaultProps;
StackedBarSeries.displayName = 'StackedBarSeries';