@semcore/chart
Version:
Semrush Chart Component
319 lines (309 loc) • 12.5 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
Object.defineProperty(exports, "__esModule", {
value: true
});
exports["default"] = void 0;
var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
var _react = _interopRequireDefault(require("react"));
var _recharts = require("recharts");
var _isNil = _interopRequireDefault(require("lodash/isNil"));
var _classnames = _interopRequireDefault(require("classnames"));
var _ReactUtils = require("recharts/lib/util/ReactUtils");
var _colors = require("../../utils/colors");
var _utils = require("../../utils");
var _DataUtils = require("recharts/lib/util/DataUtils");
var _reactSmooth = _interopRequireDefault(require("react-smooth"));
// @ts-ignore
_recharts.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 = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, (0, _ReactUtils.getPresentationAttributes)(this.props)), (0, _ReactUtils.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["default"].createElement(_recharts.Layer, {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : null
}, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
id: patchedClipPathId
}, (0, _utils.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["default"].createElement(_recharts.Rectangle, {
key: i,
width: width,
height: cpHeight,
x: x,
y: 0
});
}))), connectNulls && /*#__PURE__*/_react["default"].createElement(_recharts.Curve, (0, _extends2["default"])({}, curveProps, {
points: (0, _utils.normalizeCurvePoints)(points),
stroke: _colors.colors['gray-blue'],
strokeWidth: 3,
strokeDasharray: "6"
})), /*#__PURE__*/_react["default"].createElement(_recharts.Curve, (0, _extends2["default"])({}, curveProps, {
clipPath: "url(#".concat(patchedClipPathId, ")"),
points: (0, _utils.normalizeCurvePoints)(points),
connectNulls: true,
pathRef: this.pathRef
})));
};
// @ts-ignore
_recharts.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["default"].createElement(_reactSmooth["default"], {
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 = (0, _DataUtils.interpolateNumber)(prev.x, entry.x);
var interpolatorY = (0, _DataUtils.interpolateNumber)(prev.y, entry.y);
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, entry), {}, {
x: interpolatorX(t),
y: interpolatorY(t)
});
}
return entry;
});
var stepBaseLine;
if ((0, _DataUtils.isNumber)(baseLine)) {
var interpolator = (0, _DataUtils.interpolateNumber)(prevBaseLine, baseLine);
stepBaseLine = interpolator(t);
} else if ((0, _isNil["default"])(baseLine) || Number.isNaN(baseLine)) {
var _interpolator = (0, _DataUtils.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 = (0, _DataUtils.interpolateNumber)(prev.x, entry.x);
var interpolatorY = (0, _DataUtils.interpolateNumber)(prev.y, entry.y);
return (0, _objectSpread2["default"])((0, _objectSpread2["default"])({}, entry), {}, {
x: interpolatorX(t),
y: interpolatorY(t)
});
}
return entry;
});
}
return _this.renderCurveStatically(stepPoints, stepBaseLine, needClip, clipPathId);
}
return /*#__PURE__*/_react["default"].createElement(_recharts.Layer, null, /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
id: "animationClipPath-".concat(clipPathId)
}, _this.renderClipRect(t))), /*#__PURE__*/_react["default"].createElement(_recharts.Layer, {
clipPath: "url(#animationClipPath-".concat(clipPathId, ")")
}, _this.renderCurveStatically(points, baseLine, needClip, clipPathId)));
});
};
// @ts-ignore
_recharts.Line.prototype.renderClipRect = function (alpha) {
var layout = this.props.layout;
if (layout === 'vertical') {
return this.renderVerticalRect(alpha);
}
return this.renderHorizontalRect(alpha);
};
// @ts-ignore
_recharts.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 ((0, _DataUtils.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 ((0, _DataUtils.isNumber)(maxX)) {
return /*#__PURE__*/_react["default"].createElement("rect", {
x: 0,
y: startY < endY ? startY : startY - height,
width: maxX + (strokeWidth || 1)
// @ts-ignore
,
height: parseInt(height, 10)
});
}
return null;
};
// @ts-ignore
_recharts.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 ((0, _DataUtils.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 ((0, _DataUtils.isNumber)(maxY)) {
return /*#__PURE__*/_react["default"].createElement("rect", {
x: startX < endX ? startX : startX - width,
y: 0,
width: width,
height: parseInt(maxY + (strokeWidth || 1), 10)
});
}
return null;
};
// @ts-ignore
_recharts.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 = (0, _ReactUtils.getPresentationAttributes)(this.props);
var customDotProps = (0, _ReactUtils.getPresentationAttributes)(dot);
var dotEvents = (0, _ReactUtils.filterEventAttributes)(dot);
if (!dot) {
points = points.length > 1 ? points.filter((0, _utils.filterDotPoints)(dataKey)) : points;
}
var dots = points.map(function (entry, i) {
var dotProps = (0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])((0, _objectSpread2["default"])({
key: "dot-".concat(i),
r: 6
}, lineProps), {}, {
stroke: _colors.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["default"].createElement(_recharts.Layer, (0, _extends2["default"])({
className: "recharts-line-dots",
key: "dots"
}, dotsProps), dots);
};
// @ts-ignore
_recharts.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 = (0, _classnames["default"])('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 = (0, _isNil["default"])(id) ? this.id : id;
return /*#__PURE__*/_react["default"].createElement(_recharts.Layer, {
className: layerClass
}, needClip ? /*#__PURE__*/_react["default"].createElement("defs", null, /*#__PURE__*/_react["default"].createElement("clipPath", {
id: "clipPath-".concat(clipPathId)
}, /*#__PURE__*/_react["default"].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
_recharts.LabelList.renderCallByParent(this.props, points));
};
// @ts-ignore
_recharts.Line.defaultProps.stroke = _colors.colors['blue-01'];
// @ts-ignore
_recharts.Line.defaultProps.fill = _colors.colors['blue-01'];
// @ts-ignore
_recharts.Line.defaultProps.strokeWidth = 3;
// @ts-ignore
_recharts.Line.defaultProps.dot = false;
// @ts-ignore
_recharts.Line.defaultProps.activeDot = {
r: 8,
strokeWidth: 2,
stroke: _colors.colors['white']
};
// @ts-ignore
_recharts.Line.defaultProps.type = 'monotone';
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
var _default = _recharts.Line;
exports["default"] = _default;
//# sourceMappingURL=Line.js.map