@semcore/chart
Version:
Semrush Chart Component
184 lines (178 loc) • 6.72 kB
JavaScript
import _objectSpread from "@babel/runtime/helpers/objectSpread2";
import _extends from "@babel/runtime/helpers/extends";
import { Area as AreaRecharts, 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, deleteNullCurvePoints, filterDotPoints } from '../../utils';
import React from 'react';
// @ts-ignore
AreaRecharts.prototype.renderAreaStatically = function (points, baseLine, needClip, clipPathId) {
var _this$props = this.props,
layout = _this$props.layout,
type = _this$props.type,
stroke = _this$props.stroke,
connectNulls = _this$props.connectNulls,
isRange = _this$props.isRange,
height = _this$props.height,
top = _this$props.top,
bottom = _this$props.bottom,
dataKey = _this$props.dataKey,
stackId = _this$props.stackId;
var drawClipPath = true;
var normalizedPoints = normalizeCurvePoints(points, dataKey);
var patchedClipPathId = "".concat(this.id, "-null-points");
if (stackId) {
normalizedPoints = connectNulls ? deleteNullCurvePoints(normalizedPoints, dataKey) : points;
drawClipPath = connectNulls;
}
return /*#__PURE__*/React.createElement(Layer, {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : null
}, drawClipPath && /*#__PURE__*/React.createElement("defs", null, /*#__PURE__*/React.createElement("clipPath", {
id: patchedClipPathId
}, computeDefinedSegments(points, dataKey).map(function (segment, idx) {
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, {
width: width,
height: cpHeight,
x: x,
y: 0,
key: idx
});
}))), /*#__PURE__*/React.createElement(Curve, _extends({}, this.props, {
connectNulls: true,
points: points,
baseLine: baseLine,
stroke: "none",
className: "recharts-area-area",
clipPath: "url(#".concat(patchedClipPathId, ")")
})), stroke !== 'none' && /*#__PURE__*/React.createElement(React.Fragment, null, connectNulls && /*#__PURE__*/React.createElement(Curve, _extends({}, getPresentationAttributes(this.props), {
className: "recharts-area-curve",
layout: layout,
type: type,
connectNulls: true,
fill: "none",
stroke: colors['gray-blue'],
strokeWidth: 3,
strokeDasharray: "6",
points: normalizedPoints
})), /*#__PURE__*/React.createElement(Curve, _extends({}, getPresentationAttributes(this.props), {
className: "recharts-area-curve",
layout: layout,
type: type,
connectNulls: true,
fill: "none",
points: normalizedPoints,
clipPath: "url(#".concat(patchedClipPathId, ")")
}))), stroke !== 'none' && isRange && /*#__PURE__*/React.createElement(Curve, _extends({}, getPresentationAttributes(this.props), {
className: "recharts-area-curve",
layout: layout,
type: type,
connectNulls: connectNulls,
fill: "none",
points: baseLine
})));
};
// @ts-ignore
AreaRecharts.prototype.renderDots = function (needClip, clipPathId) {
var _this = this;
var isAnimationActive = this.props.isAnimationActive;
var isAnimationFinished = this.state.isAnimationFinished;
if (isAnimationActive && !isAnimationFinished) {
return null;
}
var _this$props2 = this.props,
dot = _this$props2.dot,
points = _this$props2.points,
dataKey = _this$props2.dataKey;
var areaProps = 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
}, areaProps), {}, {
stroke: colors['white'],
strokeWidth: 2
}, customDotProps), dotEvents), {}, {
dataKey: dataKey,
cx: entry.x,
cy: entry.y,
index: i,
value: entry.value,
payload: entry.payload
});
return _this.constructor.renderDotItem(dot, dotProps);
});
var dotsProps = {
clipPath: needClip ? "url(#clipPath-".concat(clipPathId, ")") : null
};
return /*#__PURE__*/React.createElement(Layer, _extends({
className: "recharts-area-dots"
}, dotsProps), dots);
};
// @ts-ignore
AreaRecharts.prototype.render = function () {
var _this$props3 = this.props,
hide = _this$props3.hide,
points = _this$props3.points,
className = _this$props3.className,
top = _this$props3.top,
left = _this$props3.left,
xAxis = _this$props3.xAxis,
yAxis = _this$props3.yAxis,
width = _this$props3.width,
height = _this$props3.height,
isAnimationActive = _this$props3.isAnimationActive,
id = _this$props3.id;
if (hide || !points || !points.length) {
return null;
}
var isAnimationFinished = this.state.isAnimationFinished;
var hasSinglePoint = points.length === 1;
var layerClass = classNames('recharts-area', 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: parseInt(height, 10)
}))) : null, !hasSinglePoint ? this.renderArea(needClip, clipPathId) : null, this.renderDots(needClip, clipPathId), (!isAnimationActive || isAnimationFinished) &&
// @ts-ignore
LabelList.renderCallByParent(this.props, points));
};
// @ts-ignore
AreaRecharts.defaultProps.stroke = colors['blue-01'];
// @ts-ignore
AreaRecharts.defaultProps.fill = colors['blue-01'];
// @ts-ignore
AreaRecharts.defaultProps.strokeWidth = 3;
// @ts-ignore
AreaRecharts.defaultProps.fillOpacity = '0.2';
// @ts-ignore
AreaRecharts.defaultProps.dot = false;
// @ts-ignore
AreaRecharts.defaultProps.activeDot = {
r: 8,
strokeWidth: 2,
stroke: colors['white']
};
/**
* @deprecated Please, use package `@semcore/ui/d3-chart` instead. Package `@semcore/chart` is deprecated.
*/
export default AreaRecharts;
//# sourceMappingURL=Area.js.map