infinity-trend
Version:
A React component designed for effortlessly creating smooth, responsive trend and line graphs.
162 lines (157 loc) • 7.34 kB
JavaScript
;
exports.__esModule = true;
exports["default"] = void 0;
var _react = _interopRequireWildcard(require("react"));
var _propTypes = _interopRequireDefault(require("prop-types"));
var _utils = require("../../utils");
var _DOM = require("../../helpers/DOM.helpers");
var _math = require("../../helpers/math.helpers");
var _misc = require("../../helpers/misc.helpers");
var _Trend = require("./Trend.helpers");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
function _extends() { return _extends = Object.assign ? Object.assign.bind() : function (n) { for (var e = 1; e < arguments.length; e++) { var t = arguments[e]; for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]); } return n; }, _extends.apply(null, arguments); }
function _inheritsLoose(t, o) { t.prototype = Object.create(o.prototype), t.prototype.constructor = t, _setPrototypeOf(t, o); }
function _setPrototypeOf(t, e) { return _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function (t, e) { return t.__proto__ = e, t; }, _setPrototypeOf(t, e); }
var propTypes = {
data: _propTypes["default"].arrayOf(_propTypes["default"].oneOfType([_propTypes["default"].number, _propTypes["default"].shape({
value: _propTypes["default"].number
})]).isRequired).isRequired,
smooth: _propTypes["default"].bool,
autoDraw: _propTypes["default"].bool,
autoDrawDuration: _propTypes["default"].number,
autoDrawEasing: _propTypes["default"].string,
width: _propTypes["default"].number,
height: _propTypes["default"].number,
padding: _propTypes["default"].number,
radius: _propTypes["default"].number,
gradient: _propTypes["default"].arrayOf(_propTypes["default"].string)
};
var defaultProps = {
radius: 10,
stroke: 'black',
padding: 8,
strokeWidth: 1,
autoDraw: false,
autoDrawDuration: 2000,
autoDrawEasing: 'ease'
};
var Trend = /*#__PURE__*/function (_Component) {
function Trend(props) {
var _this;
_this = _Component.call(this, props) || this;
// Generate a random ID. This is important for distinguishing between
// Trend components on a page, so that they can have different keyframe
// animations.
_this.trendId = (0, _misc.generateId)();
_this.gradientId = "infinity-trend-vertical-gradient-" + _this.trendId;
return _this;
}
_inheritsLoose(Trend, _Component);
var _proto = Trend.prototype;
_proto.componentDidMount = function componentDidMount() {
var _this$props = this.props,
autoDraw = _this$props.autoDraw,
autoDrawDuration = _this$props.autoDrawDuration,
autoDrawEasing = _this$props.autoDrawEasing;
if (autoDraw) {
this.lineLength = this.path.getTotalLength();
var css = (0, _Trend.generateAutoDrawCss)({
id: this.trendId,
lineLength: this.lineLength,
duration: autoDrawDuration,
easing: autoDrawEasing
});
(0, _DOM.injectStyleTag)(css);
}
};
_proto.getDelegatedProps = function getDelegatedProps() {
return (0, _utils.omit)(this.props, Object.keys(propTypes));
};
_proto.renderGradientDefinition = function renderGradientDefinition() {
var gradient = this.props.gradient;
return /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("linearGradient", {
id: this.gradientId,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, gradient.slice().reverse().map(function (c, index) {
return /*#__PURE__*/_react["default"].createElement("stop", {
key: index,
offset: (0, _math.normalize)({
value: index,
min: 0,
// If we only supply a single colour, it will try to normalize
// between 0 and 0, which will create NaN. By making the `max`
// at least 1, we ensure single-color "gradients" work.
max: gradient.length - 1 || 1
}),
stopColor: c
});
})));
};
_proto.render = function render() {
var _this2 = this;
var _this$props2 = this.props,
data = _this$props2.data,
smooth = _this$props2.smooth,
width = _this$props2.width,
height = _this$props2.height,
padding = _this$props2.padding,
radius = _this$props2.radius,
gradient = _this$props2.gradient;
// We need at least 2 points to draw a graph.
if (!data || data.length < 2) {
return null;
}
// `data` can either be an array of numbers:
// [1, 2, 3]
// or, an array of objects containing a value:
// [ { value: 1 }, { value: 2 }, { value: 3 }]
//
// For now, we're just going to convert the second form to the first.
// Later on, if/when we support tooltips, we may adjust.
var plainValues = data.map(function (point) {
return typeof point === 'number' ? point : point.value;
});
// Our viewbox needs to be in absolute units, so we'll default to 300x75
// Our SVG can be a %, though; this is what makes it scalable.
// By defaulting to percentages, the SVG will grow to fill its parent
// container, preserving a 1/4 aspect ratio.
var viewBoxWidth = width || 300;
var viewBoxHeight = height || 75;
var svgWidth = width || '100%';
var svgHeight = height || '25%';
var normalizedValues = (0, _Trend.normalizeDataset)(plainValues, {
minX: padding,
maxX: viewBoxWidth - padding,
// NOTE: Because SVGs are indexed from the top left, but most data is
// indexed from the bottom left, we're inverting the Y min/max.
minY: viewBoxHeight - padding,
maxY: padding
});
var path = smooth ? (0, _DOM.buildSmoothPath)(normalizedValues, {
radius: radius
}) : (0, _DOM.buildLinearPath)(normalizedValues);
return /*#__PURE__*/_react["default"].createElement("svg", _extends({
width: svgWidth,
height: svgHeight,
viewBox: "0 0 " + viewBoxWidth + " " + viewBoxHeight
}, this.getDelegatedProps()), gradient && this.renderGradientDefinition(), /*#__PURE__*/_react["default"].createElement("path", {
ref: function ref(elem) {
_this2.path = elem;
},
id: "infinity-trend-" + this.trendId,
d: path,
fill: "none",
stroke: gradient ? "url(#" + this.gradientId + ")" : undefined
}));
};
return Trend;
}(_react.Component);
Trend.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Trend.defaultProps = defaultProps;
var _default = exports["default"] = Trend;
module.exports = exports.default;