@data-ui/sparkline
Version:
React + d3 library for creating sparklines
186 lines (159 loc) • 7.63 kB
JavaScript
;
exports.__esModule = true;
exports.default = exports.defaultProps = exports.propTypes = void 0;
var _propTypes = _interopRequireDefault(require("prop-types"));
var _react = _interopRequireDefault(require("react"));
var _d3Array = require("d3-array");
var _Dot = _interopRequireDefault(require("@vx/glyph/build/glyphs/Dot"));
var _Group = _interopRequireDefault(require("@vx/group/build/Group"));
var _theme = require("@data-ui/theme");
var _Label = _interopRequireDefault(require("../annotation/Label"));
var _callOrValue = _interopRequireDefault(require("../utils/callOrValue"));
var _defined = _interopRequireDefault(require("../utils/defined"));
var _positionLabel = _interopRequireDefault(require("../utils/positionLabel"));
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 = {
fill: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
fillOpacity: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
LabelComponent: _propTypes.default.element,
labelOffset: _propTypes.default.number,
labelPosition: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.oneOf(['auto', 'top', 'right', 'bottom', 'left'])]),
onMouseMove: _propTypes.default.func,
onMouseLeave: _propTypes.default.func,
points: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, // index
_propTypes.default.oneOf(['all', 'min', 'max', 'first', 'last'])])),
size: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
renderLabel: _propTypes.default.func,
// (d, i) => node
stroke: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.string]),
strokeWidth: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.number]),
// all likely passed by the parent chart
data: _propTypes.default.arrayOf(_propTypes.default.oneOfType([_propTypes.default.number, _propTypes.default.object])),
getX: _propTypes.default.func,
getY: _propTypes.default.func,
xScale: _propTypes.default.func,
yScale: _propTypes.default.func
};
exports.propTypes = propTypes;
var defaultProps = {
data: [],
fill: _theme.color.default,
fillOpacity: 1,
LabelComponent: _react.default.createElement(_Label.default, _extends({}, _theme.svgLabel.baseTickLabel, {
stroke: "#fff"
})),
labelOffset: 12,
labelPosition: 'auto',
onMouseMove: null,
onMouseLeave: null,
getX: null,
getY: null,
points: ['min', 'max'],
renderLabel: null,
size: 4,
stroke: '#fff',
strokeWidth: 2,
xScale: null,
yScale: null
};
exports.defaultProps = defaultProps;
var ZERO_DELTA = 0.00001;
var PointSeries =
/*#__PURE__*/
function (_React$Component) {
_inheritsLoose(PointSeries, _React$Component);
function PointSeries() {
return _React$Component.apply(this, arguments) || this;
}
var _proto = PointSeries.prototype;
// we define a custom handler because the points prop may be impractible to cache
_proto.shouldComponentUpdate = function shouldComponentUpdate(nextProps) {
var _this = this;
var nonPointsAreEqual = Object.keys(propTypes).every( // eslint-disable-next-line react/destructuring-assignment
function (prop) {
return prop === 'points' || _this.props[prop] === nextProps[prop];
});
var points = this.props.points;
var pointsAreEqual = nextProps.points.length === points.length && nextProps.points.every(function (point) {
return points.indexOf(point) > -1;
});
return !(pointsAreEqual && nonPointsAreEqual);
};
_proto.render = function render() {
var _this$props = this.props,
data = _this$props.data,
getX = _this$props.getX,
getY = _this$props.getY,
fill = _this$props.fill,
fillOpacity = _this$props.fillOpacity,
LabelComponent = _this$props.LabelComponent,
labelOffset = _this$props.labelOffset,
labelPosition = _this$props.labelPosition,
onMouseMove = _this$props.onMouseMove,
onMouseLeave = _this$props.onMouseLeave,
points = _this$props.points,
renderLabel = _this$props.renderLabel,
size = _this$props.size,
stroke = _this$props.stroke,
strokeWidth = _this$props.strokeWidth,
xScale = _this$props.xScale,
yScale = _this$props.yScale;
if (!xScale || !yScale || !getX || !getY || !data.length) return null;
var showAll = points.includes('all');
var showMin = points.includes('min');
var showMax = points.includes('max');
var showFirst = points.includes('first');
var showLast = points.includes('last');
var _extent = (0, _d3Array.extent)(data, getY),
minY = _extent[0],
maxY = _extent[1];
var lastIndex = data.length - 1;
return _react.default.createElement(_Group.default, null, data.map(function (d, i) {
if (points.indexOf(i) > -1 || showAll || showFirst && i === 0 || showLast && i === lastIndex || showMin && Math.abs(getY(d) - minY) < ZERO_DELTA || showMax && Math.abs(getY(d) - maxY) < ZERO_DELTA) {
var yVal = getY(d);
var cx = xScale(getX(d));
var cy = yScale(yVal);
var key = cx + "-" + cy + "-" + i;
var label = renderLabel && renderLabel(yVal, i);
var prevCy = data[i - 1] ? yScale(getY(data[i - 1])) : null;
var nextCy = data[i + 1] ? yScale(getY(data[i + 1])) : null;
var fillValue = (0, _callOrValue.default)(d.fill || fill, yVal, i); // position label above a point if either of the surrounding points are lower
var autoLabelPosition = prevCy !== null && prevCy > cy || nextCy !== null && nextCy > cy ? 'top' : 'bottom';
return (0, _defined.default)(cx) && (0, _defined.default)(cy) && _react.default.createElement(_Dot.default, {
key: key,
cx: cx,
cy: cy,
r: (0, _callOrValue.default)(d.size || size, yVal, i),
fill: fillValue,
fillOpacity: (0, _callOrValue.default)(d.fillOpacity || fillOpacity, yVal, i),
stroke: (0, _callOrValue.default)(d.stroke || stroke, yVal, i),
strokeWidth: (0, _callOrValue.default)(d.strokeWidth || strokeWidth, yVal, i),
onMouseMove: onMouseMove && function (event) {
onMouseMove({
event: event,
data: data,
datum: d,
index: i,
color: fillValue
});
},
onMouseLeave: onMouseLeave
}, label && _react.default.cloneElement(LabelComponent, _extends({
x: cx,
y: cy
}, (0, _positionLabel.default)(labelPosition === 'auto' ? autoLabelPosition : (0, _callOrValue.default)(labelPosition, yVal, i), labelOffset), {
label: label
})));
}
return null;
}));
};
return PointSeries;
}(_react.default.Component);
PointSeries.propTypes = propTypes;
PointSeries.defaultProps = defaultProps;
PointSeries.displayName = 'PointSeries';
var _default = PointSeries;
exports.default = _default;