@semcore/chart
Version:
Semrush Chart Component
315 lines (304 loc) • 11.1 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import React from 'react';
import { Line, Curve,
// @ts-ignore
Layer, LabelList, Rectangle } from 'recharts';
import isNil from 'lodash/isNil';
import classNames from 'classnames';
import { getPresentationAttributes, filterEventAttributes } from "recharts/es6/util/ReactUtils";
import { colors } from '../../utils/colors';
import { computeDefinedSegments, normalizeCurvePoints, filterDotPoints } from '../../utils';
import { isNumber, interpolateNumber } from "recharts/es6/util/DataUtils";
import Animate from 'react-smooth';
// @ts-ignore
Line.prototype.renderCurveStatically = function (points, needClip, clipPathId, props) {
var _this$props = this.props,
type = _this$props.type,
layout = _this$props.layout,
connectNulls = _this$props.connectNulls,
dataKey = _this$props.dataKey,
height = _this$props.height,
top = _this$props.top,
bottom = _this$props.bottom;
var curveProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({}, getPresentationAttributes(this.props)), filterEventAttributes(this.props)), {}, {
fill: 'none',
className: 'recharts-line-curve',
points: points
}, props), {}, {
type: type,
layout: layout,
connectNulls: connectNulls
});
var patchedClipPathId = "".concat(this.id, "-null-points");
return /*#__PURE__*/React.createElement(Layer, {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : null
}, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
id: patchedClipPathId
}, computeDefinedSegments(points, dataKey).map(function (segment, i) {
var x = segment[0].x;
var width = segment[segment.length - 1].x - segment[0].x;
var cpHeight = height + top + bottom;
return /*#__PURE__*/React.createElement(Rectangle, {
key: i,
width: width,
height: cpHeight,
x: x,
y: 0
});
}))), connectNulls && /*#__PURE__*/React.createElement(Curve, _extends({}, curveProps, {
points: normalizeCurvePoints(points),
stroke: colors['gray-blue'],
strokeWidth: 3,
strokeDasharray: "6"
})), /*#__PURE__*/React.createElement(Curve, _extends({}, curveProps, {
clipPath: "url(#".concat(patchedClipPathId, ")"),
points: normalizeCurvePoints(points),
connectNulls: true,
pathRef: this.pathRef
})));
};
// @ts-ignore
Line.prototype.renderCurveWithAnimation = function (needClip, clipPathId) {
var _this = this;
var _this$props2 = this.props,
points = _this$props2.points,
baseLine = _this$props2.baseLine,
isAnimationActive = _this$props2.isAnimationActive,
animationBegin = _this$props2.animationBegin,
animationDuration = _this$props2.animationDuration,
animationEasing = _this$props2.animationEasing,
animationId = _this$props2.animationId;
var _this$state = this.state,
prevPoints = _this$state.prevPoints,
prevBaseLine = _this$state.prevBaseLine;
// const clipPathId = _.isNil(id) ? this.id : id;
return /*#__PURE__*/React.createElement(Animate, {
begin: animationBegin,
duration: animationDuration,
isActive: isAnimationActive,
easing: animationEasing,
from: {
t: 0
},
to: {
t: 1
},
key: "area-".concat(animationId),
onAnimationEnd: this.handleAnimationEnd,
onAnimationStart: this.handleAnimationStart
}, function (_ref) {
var t = _ref.t;
if (prevPoints) {
var prevPointsDiffFactor = prevPoints.length / points.length;
// update animtaion
var stepPoints = points.map(function (entry, index) {
var prevPointIndex = Math.floor(index * prevPointsDiffFactor);
if (prevPoints[prevPointIndex]) {
var prev = prevPoints[prevPointIndex];
var interpolatorX = interpolateNumber(prev.x, entry.x);
var interpolatorY = interpolateNumber(prev.y, entry.y);
return _objectSpread(_objectSpread({}, entry), {}, {
x: interpolatorX(t),
y: interpolatorY(t)
});
}
return entry;
});
var stepBaseLine;
if (isNumber(baseLine)) {
var interpolator = interpolateNumber(prevBaseLine, baseLine);
stepBaseLine = interpolator(t);
} else if (isNil(baseLine) || Number.isNaN(baseLine)) {
var _interpolator = interpolateNumber(prevBaseLine, 0);
stepBaseLine = _interpolator(t);
} else {
stepBaseLine = baseLine.map(function (entry, index) {
var prevPointIndex = Math.floor(index * prevPointsDiffFactor);
if (prevBaseLine[prevPointIndex]) {
var prev = prevBaseLine[prevPointIndex];
var interpolatorX = interpolateNumber(prev.x, entry.x);
var interpolatorY = interpolateNumber(prev.y, entry.y);
return _objectSpread(_objectSpread({}, entry), {}, {
x: interpolatorX(t),
y: interpolatorY(t)
});
}
return entry;
});
}
return _this.renderCurveStatically(stepPoints, stepBaseLine, needClip, clipPathId);
}
return /*#__PURE__*/React.createElement(Layer, null, /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
id: "animationClipPath-".concat(clipPathId)
}, _this.renderClipRect(t))), /*#__PURE__*/React.createElement(Layer, {
clipPath: "url(#animationClipPath-".concat(clipPathId, ")")
}, _this.renderCurveStatically(points, baseLine, needClip, clipPathId)));
});
};
// @ts-ignore
Line.prototype.renderClipRect = function (alpha) {
var layout = this.props.layout;
if (layout === 'vertical') {
return this.renderVerticalRect(alpha);
}
return this.renderHorizontalRect(alpha);
};
// @ts-ignore
Line.prototype.renderVerticalRect = function (alpha) {
var _this$props3 = this.props,
baseLine = _this$props3.baseLine,
points = _this$props3.points,
strokeWidth = _this$props3.strokeWidth;
var startY = points[0].y;
var endY = points[points.length - 1].y;
var height = alpha * Math.abs(startY - endY);
var maxX = Math.max.apply(null, points.map(function (entry) {
return entry.x || 0;
}));
if (isNumber(baseLine)) {
maxX = Math.max(baseLine, maxX);
} else if (baseLine && Array.isArray(baseLine) && baseLine.length) {
maxX = Math.max(Math.max.apply(null, baseLine.map(function (entry) {
return entry.x || 0;
})), maxX);
}
if (isNumber(maxX)) {
return /*#__PURE__*/React.createElement("rect", {
x: 0,
y: startY < endY ? startY : startY - height,
width: maxX + (strokeWidth || 1)
// @ts-ignore
,
height: parseInt(height, 10)
});
}
return null;
};
// @ts-ignore
Line.prototype.renderHorizontalRect = function (alpha) {
var _this$props4 = this.props,
baseLine = _this$props4.baseLine,
points = _this$props4.points,
strokeWidth = _this$props4.strokeWidth;
var startX = points[0].x;
var endX = points[points.length - 1].x;
var width = alpha * Math.abs(startX - endX);
var maxY = Math.max.apply(null, points.map(function (entry) {
return entry.y || 0;
}));
if (isNumber(baseLine)) {
maxY = Math.max(baseLine, maxY);
} else if (baseLine && Array.isArray(baseLine) && baseLine.length) {
maxY = Math.max(Math.max.apply(null, baseLine.map(function (entry) {
return entry.y || 0;
})), maxY);
}
if (isNumber(maxY)) {
return /*#__PURE__*/React.createElement("rect", {
x: startX < endX ? startX : startX - width,
y: 0,
width: width,
height: parseInt(maxY + (strokeWidth || 1), 10)
});
}
return null;
};
// @ts-ignore
Line.prototype.renderDots = function (needClip, clipPathId) {
var _this2 = this;
var isAnimationActive = this.props.isAnimationActive;
if (isAnimationActive && !this.state.isAnimationFinished) {
return null;
}
var _this$props5 = this.props,
dot = _this$props5.dot,
points = _this$props5.points,
dataKey = _this$props5.dataKey;
var lineProps = getPresentationAttributes(this.props);
var customDotProps = getPresentationAttributes(dot);
var dotEvents = filterEventAttributes(dot);
if (!dot) {
points = points.length > 1 ? points.filter(filterDotPoints(dataKey)) : points;
}
var dots = points.map(function (entry, i) {
var dotProps = _objectSpread(_objectSpread(_objectSpread(_objectSpread({
key: "dot-".concat(i),
r: 6
}, lineProps), {}, {
stroke: colors['white'],
strokeWidth: 2
}, customDotProps), dotEvents), {}, {
value: entry.value,
dataKey: dataKey,
cx: entry.x,
cy: entry.y,
index: i,
payload: entry.payload
});
return _this2.constructor.renderDotItem(dot, dotProps);
});
var dotsProps = {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : null
};
return /*#__PURE__*/React.createElement(Layer, _extends({
className: "recharts-line-dots",
key: "dots"
}, dotsProps), dots);
};
// @ts-ignore
Line.prototype.render = function () {
var _this$props6 = this.props,
hide = _this$props6.hide,
points = _this$props6.points,
className = _this$props6.className,
xAxis = _this$props6.xAxis,
yAxis = _this$props6.yAxis,
top = _this$props6.top,
left = _this$props6.left,
width = _this$props6.width,
height = _this$props6.height,
isAnimationActive = _this$props6.isAnimationActive,
id = _this$props6.id;
if (hide || !points || !points.length) {
return null;
}
var isAnimationFinished = this.state.isAnimationFinished;
var hasSinglePoint = points.length === 1;
var layerClass = classNames('recharts-line', className);
var needClip = (xAxis === null || xAxis === void 0 ? void 0 : xAxis.allowDataOverflow) || (yAxis === null || yAxis === void 0 ? void 0 : yAxis.allowDataOverflow);
var clipPathId = isNil(id) ? this.id : id;
return /*#__PURE__*/React.createElement(Layer, {
className: layerClass
}, needClip ? /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
id: "clipPath-".concat(clipPathId)
}, /*#__PURE__*/React.createElement("rect", {
x: left,
y: top,
width: width,
height: height
}))) : null, !hasSinglePoint && this.renderCurve(needClip, clipPathId), this.renderErrorBar(), this.renderDots(needClip, clipPathId), (!isAnimationActive || isAnimationFinished) &&
//@ts-ignore
LabelList.renderCallByParent(this.props, points));
};
// @ts-ignore
Line.defaultProps.stroke = colors['blue-01'];
// @ts-ignore
Line.defaultProps.fill = colors['blue-01'];
// @ts-ignore
Line.defaultProps.strokeWidth = 3;
// @ts-ignore
Line.defaultProps.dot = false;
// @ts-ignore
Line.defaultProps.activeDot = {
r: 8,
strokeWidth: 2,
stroke: colors['white']
};
// @ts-ignore
Line.defaultProps.type = 'monotone';
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
export default Line;
//# sourceMappingURL=Line.js.map