infinity-trend
Version:
A React component designed for effortlessly creating smooth, responsive trend and line graphs.
154 lines (150 loc) • 6.03 kB
JavaScript
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); }
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { omit } from '../../utils';
import { buildSmoothPath, buildLinearPath, injectStyleTag } from '../../helpers/DOM.helpers';
import { normalize } from '../../helpers/math.helpers';
import { generateId } from '../../helpers/misc.helpers';
import { normalizeDataset, generateAutoDrawCss } from './Trend.helpers';
var propTypes = {
data: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.number, PropTypes.shape({
value: PropTypes.number
})]).isRequired).isRequired,
smooth: PropTypes.bool,
autoDraw: PropTypes.bool,
autoDrawDuration: PropTypes.number,
autoDrawEasing: PropTypes.string,
width: PropTypes.number,
height: PropTypes.number,
padding: PropTypes.number,
radius: PropTypes.number,
gradient: PropTypes.arrayOf(PropTypes.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 = 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 = generateAutoDrawCss({
id: this.trendId,
lineLength: this.lineLength,
duration: autoDrawDuration,
easing: autoDrawEasing
});
injectStyleTag(css);
}
};
_proto.getDelegatedProps = function getDelegatedProps() {
return omit(this.props, Object.keys(propTypes));
};
_proto.renderGradientDefinition = function renderGradientDefinition() {
var gradient = this.props.gradient;
return /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("linearGradient", {
id: this.gradientId,
x1: "0%",
y1: "0%",
x2: "0%",
y2: "100%"
}, gradient.slice().reverse().map(function (c, index) {
return /*#__PURE__*/React.createElement("stop", {
key: index,
offset: 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 = 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 ? buildSmoothPath(normalizedValues, {
radius: radius
}) : buildLinearPath(normalizedValues);
return /*#__PURE__*/React.createElement("svg", _extends({
width: svgWidth,
height: svgHeight,
viewBox: "0 0 " + viewBoxWidth + " " + viewBoxHeight
}, this.getDelegatedProps()), gradient && this.renderGradientDefinition(), /*#__PURE__*/React.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;
}(Component);
Trend.propTypes = process.env.NODE_ENV !== "production" ? propTypes : {};
Trend.defaultProps = defaultProps;
export default Trend;